vue3+elementPlus el

elementPlus el"/>

vue3+elementPlus el

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值