el-select：从字典获取下拉框内容后，自定义下拉框展示内容，并且可以根据value值进行模糊查询_el-select模糊查询

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