近期工作需要用到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,
    },
  },

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐