element 虚拟，节流select

最新推荐文章于 2023-12-06 15:03:08 发布

Lifemustrough

最新推荐文章于 2023-12-06 15:03:08 发布

阅读量627

点赞数 1

分类专栏：前端文章标签： vue elementui

本文链接：https://blog.csdn.net/Lifemustrough/article/details/119931195

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了一种解决大型数据集下Select组件卡顿问题的方法，通过封装一个名为throttling-select的组件，实现节流选择功能，并支持远程搜索。组件内部使用了El-select，并在选项过多时进行优化，只显示部分数据，同时提供了搜索过滤功能，以提高用户体验。

摘要由CSDN通过智能技术生成

由于select组件如果里面的选择项过多，会造成卡顿，所以封装一个组件，节流选择，支持大数据搜索

<throttling-select v-model="value" :list="options" :placeholder="placeholder" selkey="key" sellabel="label"></throttling-select>

添加组件 throttling-select如下

<template>
  <el-select
    @visible-change="popChange"
    v-model="selectValue"
    filterable
    remote
    :placeholder="placeholder"
    :remote-method="remoteMethod"
    :loading="loading"
    style="width: calc(98% - 20px)"
  >
    <el-option
      v-for="item in options"
      :key="item[selkey]"
      :label="item[sellabel]"
      :value="item[selkey]"
    >
    </el-option>
  </el-select>
</template>

<script>
export default {
  mixins: [],
  filters: {},
  components: {},
  model: {
    prop: 'value', //绑定的值，通过父组件传递
    event: 'update' //自定义名
  },
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    list: {//选项值
      type: Array,
      default: () => []
    },
    placeholder: {
      type: [String, Number],
      default: '选项多的属性，加载慢，建议搜索'
    },
    selkey: {
      type: [String, Number],
      default: 'key'
    },
    sellabel: {
      type: [String, Number],
      default: 'label'
    }
  },
  data() {
    return {
      options: [],
      selectValue: '',
      loading: false
    }
  },
  computed: {},
  watch: {
    selectValue(val) {
      console.log(val)
      this.$emit('update', val)
    }
  },
  created() {
    this.selectValue = this.value
  },
  mounted() {
  },
  destroyed() {
  },
  methods: {
    popChange(e) {
      console.log(e)
      if (e) {
        this.loading = true
        this.options = this.list.length > 1000 ? [] : [...this.list]
        this.loading = false
      }
    },
    remoteMethod(query) {
      console.log(query)
      if (query !== '') {
        this.loading = true
        this.options = []
        const reg = new RegExp(query.toLowerCase())
        setTimeout(() => {
          this.options = this.list.filter(item => {
            return reg.test(item[this.selkey].toLowerCase())
          })
          this.loading = false
        }, 50)
      } else {
        this.options = []
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped></style>