element ui封装可搜索下拉框（解决数据过多卡顿问题）

本文链接：https://blog.youkuaiyun.com/zhang1339435196/article/details/125297355

该博客介绍了Vue自定义组件FilterSelect的实现，该组件用于创建一个可过滤、可清空、可搜索的下拉选择框。组件通过v-model双向绑定值，并监听输入变化，同时在数据更新时自动处理回显和数据限制。文章详细展示了组件的模板、脚本部分，包括属性、方法和数据处理，特别是搜索方法handleFilter，用于过滤选项并限制显示数量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

FilterSelect.vue

<template>
  <el-select
    v-model="innerValue"
    :disabled="disabled"
    filterable
    clearable
    :placeholder="placeholder"
    :filter-method="handleFilter"
    @change="changeHandler"
  >
    <el-option
      v-for="item in options"
      :key="item[keyField]"
      :label="item[labelField]"
      :value="item[valueField]"
    />
  </el-select>
</template>
<script>
export default {
  name: 'FilterSelect',
  model: {
    // model选项可以自定义prop名称和event名称
    prop: 'value',
    event: 'handleSelectChange'
  },
  props: {
    // 下拉框数据
    value: {
      type: String,
      default: () => ''
    },
    selectList: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: () => false
    },
    placeholder: {
      type: String,
      default: () => '请选择'
    },
    labelField: {
      type: String,
      default: () => 'label'
    },
    valueField: {
      type: String,
      default: () => 'value'
    },
    keyField: {
      type: String,
      default: () => 'key'
    }
  },
  data() {
    return {
      //  下拉框实际渲染的数据
      options: [],
      innerValue: ''
    }
  },
  watch: {
    value(val) {
      // 将value同步到innerValue
      this.innerValue = val
    },

    options(val) {
      // 回显功能
      if (
        val.length > 0 &&
        this.selectList.length > 0 &&
        this.valueField &&
        this.value
      ) {
        const optionIsContain = val.filter(
          (item) => item[this.valueField] === this.value
        )
        if (optionIsContain.length === 0) {
          const activeItem = this.selectList.filter(
            (item) => item[this.valueField] === this.value
          )[0]
          this.options.unshift(activeItem)
        }
      }
      // 长度控制
      if (val.length > 30) {
        this.options = val.slice(0, 30)
      }
    },
    'selectList.length': function(n, o) {
      if (n !== o) {
        this._initData()
      }
    }
  },
  mounted() {
    this._initData()
  },
  methods: {
    // 初始化数据
    _initData() {
      this.options =
        this.selectList.length <= 30
          ? this.selectList
          : this.selectList.slice(0, 30)
      // 初始化选中值
      this.innerValue = this.value
    },
    // v-model关键函数
    changeHandler(val) {
      this.$emit('handleSelectChange', val)
    },
    // 搜索函数
    handleFilter(query) {
      if (query !== '') {
        this.options = this.selectList
          .filter((item) => {
            return (
              item[this.labelField].toLowerCase().indexOf(query.toLowerCase()) >
              -1
            )
          })
          .slice(0, 30)
      } else {
        this.options =
          this.selectList.length > 30
            ? this.selectList
            : this.selectList.slice(0, 30)
      }
    }
  }
}
</script>