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

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

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值