需求场景:
elementUI+vue实现下拉选既能根据字典项查询下拉选项又能根据字典码查询下拉选项。
需求分析:
一般是能满足查询字典项的需求就可以,我们通常会用elementUI自带的一个查询字典项的方法,也就是在elementUI框架中的<el-select></el-select>
内添加一个单词:filterable
即可。但是现在的搜索框也要根据字典码搜索到对应的字典项,很明显不符合需求,需要自己写函数。
解决方案:
在<el-select></el-select>
内添加函数:filter-method="filter"
其中filter是自定义函数。在data中初始化一个字段,我这里定义的是copy
,也就是copy: [],
,修改@focus
函数,把获取到的字典项列表赋值给this.copy
.
自定义filter函数,这里直接粘贴项目里写的函数了,不做详细描述了: