用户选择va-select选项时如何获取选中值及对应单位编码

解决方案 #

你可以通过两种方式获取选中的单位编码：

方式一：直接从现有v-model绑定值中提取 #

你当前没有给va-select配置valueBy属性，这种情况下v-model绑定的aircraftData.afta_ProcUnit1会直接拿到整个选中的选项对象，你的选项对象中id字段就是单位编码，所以构造参数时直接提取即可：

pdbt = {
   tableA: [
            {
              afta_ProcUnit1: this.aircraftData.afta_ProcUnit1?.id, // 直接取id字段即为单位编码
              afta_ProcUnit2: ProcUnit2, // 如果ProcUnit2也是va-select绑定值，同样取.id即可
            }
           ]
}

可选链?.可以避免用户未选择时访问属性报错，你也可以根据业务需求加空值判断兜底。

方式二：配置valueBy让v-model直接绑定单位编码 #

如果不需要存储整个选中对象，只想让v-model直接返回单位编码，只需给va-select添加valueBy="id"属性，指定绑定值为选项的id字段：

<va-select
:label="$t('Unit Code')"
v-model="aircraftData.afta_ProcUnit1"
textBy="name"
valueBy="id" <!-- 新增这行配置 -->
searchable
:options="optionsProcUnit1"
:addBtn="true"
placeholder=""
:error="!!afta_ProcUnit1Errors.length"
:error-messages="afta_ProcUnit1Errors"
/>

配置后aircraftData.afta_ProcUnit1的值就是选中的单位编码，构造参数时可以直接赋值：

afta_ProcUnit1: this.aircraftData.afta_ProcUnit1,

如果后续需要同时获取选中项的其他字段（比如单位名称、联系电话），可以通过id从options数组中匹配：

// 封装匹配方法
getSelectedUnit() {
  return this.optionsProcUnit1.find(item => item.id === this.aircraftData.afta_ProcUnit1) || {}
}
// 使用时即可获取其他属性
const unitName = this.getSelectedUnit().name
const unitTel = this.getSelectedUnit().tel

内容的提问来源于stack exchange，提问作者Peter