antd-vue Select 组件通过 option 拿到拓展业务数据

373 阅读1分钟
// 数据部分
const list = [
 { id: 1, name: '张三'age: 18, sex: 'man' },
 { id: 2, name:' 李四'age: 18, sex: 'woman' },
 { id: 3, name: '王五'age: 18, sex: 'man' },
 { id: 4, name: '三炮'age: 18, sex: 'woman' }
]

// 组件部分
    <a-select
              allowClear
              @change="onChange"
              placeholder="姓名"
            >
            // 自定义 options 属性,将所有拓展业务数据注入
              <a-select-option
                 v-for="item in list"
                 :options="item"
                 :value="item.id"
                 :key="item.id"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
            
 // onChange 事件,通过第二个参数 option 拿到 list 每项的拓展属性值
 onChange = ( value, option ) => {
     console.log( value, option)
     // value = 1 | 2 | 3 | 4 ...
     // option.data.attrs.options = { id: 1, name: '张三',age: 18, sex: 'man' } ...
 }