vben admin ApiSelect和ApiTreeSelect组件开启按label字段搜索功能

本文讲述了在使用VbenAdmin的ApiSelect和ApiTreeSelect组件时,如何实现按label搜索的功能,重点提到了ApiSelect中的optionFilterProp和ApiTreeSelect的treeNodeFilterProp属性在设置搜索条件时的关键作用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值