近期工作需要用到vben admin ApiSelect组件开启搜索功能,开启后搜索条件是按照value搜索的,在文档找了好久没找到按label搜索,从baidu换了好多搜索条件终于找到了,都准备自己写插槽了。
ApiSelect:
{
field: "driverId",
label: "所属驱动",
component: "ApiSelect",
colProps: {span: 5},
componentProps: {
showSearch: true, // 开启搜索
api: DictionaryDriver,
resultField:'records',
immediate:false,
labelField: 'label',
valueField: 'value',
optionFilterProp:'label', // 搜索按label字段搜索
},
},
ApiTreeSelect:
treeNodeFilterProp 此属性是关键属性,这个属性要指定接口返回数据的字段。
{
field: "deptId",
label: "选择部门",
component: "ApiTreeSelect",
colProps: { span: 24 },
componentProps: {
api: XXX,
showSearch: true,// 开启搜索
placeholder:'输入关键字可搜索',
treeNodeFilterProp:'deptName', // 这里要指定和label或者value字段同一个属性
fieldNames: {
label: "deptName",
key: "id",
value: "id",
},
getPopupContainer:()=>document.body,
},
},