vue3+elementPlus el-select组件同时支持label和value模糊查询

element ui的select组件设置filterable后, 默认支持的是通过label来进行过滤搜索,

官方文档上提供了filter-method来自定义搜索方法

想要下拉框数据里同时显示label和value可以用插槽的方式

visible-change(下拉框出现/隐藏时触发)的事件来实现功能.

功能要求：下拉框数据展示label+value，选中后的数据只展示label

代码如下：

<el-select class="flex6" placeholder="请输入代码或名称" v-model="config.seach" filterable :filter-method="value => (config.keyword = value)" @visible-change="() => (config.keyword = '')" >
       <el-option v-for="item in list" :key="item.value" :label="item.label" :value="item.value"  >{{item.value+'-'+item.label}}</el-option>
 </el-select> 

import {ref,reactive,computed} from 'vue'
let config=reactive({
        seach:'',
        keyword:'',
        basicList:[{ label: 'Timmy', value: '000001.SH' },
            { label: 'Judd', value: '000002.SH' },
            { label: 'Dequan', value: '000003.SH' },
            { label: 'Olin', value: '000004.SH' },
            { label: 'Bear', value: '000005.SH' },
            { label: 'Caesar', value: '000006.SH' },
            { label: 'Davi', value: '000007.SH' },
            { label: 'Wisdom', value: '000008.SH' },
            { label: 'Pavel', value: '000009.SH' },
            { label: 'Alain', value: '000011.SH' }],
      })
  	let list=computed(() => {//侧边栏二级名字
      if (config.keyword === '') {
            return config.basicList;
      } else {
        return config.basicList.filter(item => {
          return ( 
            String(item.label)
              .toUpperCase()
              .includes(config.keyword.toUpperCase()) ||
            String(item.value)
              .toUpperCase()
              .includes(config.keyword.toUpperCase())
          )  
        })
      }
    })

 注意：遍历的时候的key值不要用index，因为数组是事实变换的会无法找到对应的项，最好是用value值