Ant design Vue3 中的 a-select 组件使用方法详解

a-select 组件使用方法

a-select 搜索时过滤对应的 option 属性的value
实际开发中大部分使用label进行搜索 :optionFilterProp = “label” 即可使用label搜索
组件中返回值为value和label的List可直接使用搜索
如果返回值为其他属性 在使用之前的搜索不行了

为什么 placeholder 不显示 ？
placeholder 只有在 value = undefined 才会显示，对于其它的 null、0、‘’ 等等对于 JS 语言都是有意义的值。
实际使用 绑定的值为null 也会显示

示例1 ： data值为 label-value

<a-select v-model:value="selectValue" :options="options1" placeholder="请选择" style="width: 200px;" showSearch  
optionFilterProp="label"></a-select>

let selectValue = ref<string | null>(null)
const options1 = ref<any>([
  {
    value: '1',
    label: 'Jack',
  },
  {
    value: '2',
    label: 'Lucy',
  },
  {
    value: '3',
    label: 'Disabled',
  },
  {
    value: '4',
    label: 'Yiminghe',
  },
]);

示例 2 ： data返回值为 codeName-codeValue

当list返回值为 codeName-codeValue 的list时处理方法有2种

1. 把codeName-codeValue 转成 label-value数据格式 可直接搜索
2. 使用 :field-names=“{ label: ‘codeName’, value: 'codeValue ’ }” 自定义节点 不可直接搜索
   方法2 使用:filterOption=“filterOption” 去进行搜索
   示例中使用的是第二种方法

 <a-select v-model:value="selectValue" :options="options1" placeholder="请选择" style="width: 200px;" showSearch
optionFilterProp="label" :field-names="{ label: 'codeName', value: 'codeValue' }" :filterOption="filterOption"></a-select>

let selectValue = ref<string | null>(null)
const options1 = ref<any>([
  {
    codeValue: '1',
    codeName: 'Jack',
  },
  {
    codeValue: '2',
    codeName: 'Lucy',
  },
  {
    value: '4',
    codeName: 'Yiminghe',
  },
]);

// 自定义搜索
let filterOption = (value: any, option: any) => {
  console.log(option)
  return option.codeName.indexOf(value) >= 0
}

3. 获取选中选项的其他key值

正常选中的时候 只会获取到value值 如果要获取该数据的其他数值， 例如 id name 等等
使用 change方法 该方法有俩个参数 value option（选中当前的对象的所有数据）

把示例中的 option1 改为 
const options1 = ref<any>([
  {
    codeValue: '1',
    codeName: 'Jack',
    id: 13,
    isu:'2'
  },
  {
    codeValue: '2',
    codeName: 'Lucy',
    id: 12,
    isu:'3'
  },
  {
    value: '4',
    codeName: 'Yiminghe',
    id: 11,
    isu:'1'
  },
]);

let selectChange = (value: string, option: any) => {
  console.log(option)
}
打印的 option 为下列数据
//{
//    "codeValue": "2",
//    "codeName": "Lucy",
//    "id": 12,
//    "isu": "3"
//}

如果是多选的话 option 为数组 ，我们将 mode 属性设置为 “multiple”，从而启用多选模式

好了XDM，bye~~~