1.从字典获取下拉框内容展示时不符合自己的要求,可以通过在el-option中加入<div slot>{{dict.label}}</div>。可以将dictOption换成字典,因为后面需要进行模糊查询,这里我就自定义了。
<el-option v-for="dict in dictOption"
:key="dict.value"
:label="dict.label.split('-')[1]"
:value="dict.value">
<div slot>{{ dict.label }}</div>
</el-option>
2.el-select模糊查询是根据label进行模糊查询,当我们想通过value进行模糊查询,需要加上filterable可筛选数据,然后设置:filter-method自定义筛选方法。还要在筛选方法中加上防抖,目的可参考:JS中的防抖_js防抖_秃头老菜鸟的博客-CSDN博客
vue中内容
<template>
<el-select filterable :filter-method='(value) => dataFilter(value, "字典类型","dictOption")' @focus='dictChange("字典类型","dictOption")' v-model="form.modelValue">
<el-option v-for="dict in dictOption"
:key="dict.value"
:label="dict.label.split('-')[1]"
:value="dict.value">
<div slot>{{ dict.label }}</div>
</el-option>
</el-select>
</template>
<script>
import {debounce} from "@/api/common"; //引用js中的防抖方法
export default {
dicts: ['字典类型'],
data() {
return {
dictOption:[],
}
},
created() {
this.dictOption = this.dict.type.字典类型
},
methods: {
//模糊查询
dataFilter: debounce(function (val,dictsName,dictsList) {
let data = JSON.parse(JSON.stringify(this.dict.type[dictsName]))
if(val && val.trim()){
var sum = 0; //数据太多,做查询条数限制
var arry=[]
data.filter(function(v){
if(sum >= 20){
return;
} //数据太多,做查询条数限制
if (v.value.indexOf(val) !== -1 || v.label.indexOf(val) !== -1){
sum += 1; //数据太多,做查询条数限制
arry.push(JSON.parse(JSON.stringify(v)))
}
});
this[dictsList] = arry
}else{
this[dictsList] = data
}
}, 500),
//模糊查询
dictChange(dictsName,dictsList){
if (this[dictsList].length === 0){
this[dictsList] = this.dict.type[dictsName]
}
},
}
}
</script>
js中内容
import request from '@/utils/request'
//防抖
export const debounce = function (fn, t) {
let delay = t || 200;
let timer = null;
return function () {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
}
}
本篇根据value模糊查询参考:https://blog.csdn.net/keke11211/article/details/124585150
加入防抖参考: https://blog.csdn.net/ZHENGCHUNJUN/article/details/127260620