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值
更多推荐
vue3+elementPlus el
发布评论