Antd-Vue 使用 select 组件,选择 label 时,可以同时获取 value

1,003 阅读1分钟

Antd-Vue 使用 select 组件,选择 label 时,可以同时获取 value

image.png

使用 labelInValue,可以将 v-model 绑定的值变为 {key: string, label: vNodes} 的格式

<a-select
  mode="multiple"
  v-model="bakAreaData"
  style="width:400px"
  labelInValue
  @change="selectAreaChange"
  allowClear
  placeholder="请输入送达地区"
>
  <a-select-option v-for="item in provinceList" :key="item.value">
    {{ item.label }}
  </a-select-option>
</a-select>

v-model="bakAreaData"绑定的值仅用来回显。提交的值在 change 事件函数中赋值处理。

selectAreaChange(val) {
    this.label = val.label
    this.value = val.key
}