封装el-select，实现虚拟滚动,可单选、多选、搜索查询、创建条目

金乌Y

9461人浏览 · 2023-05-18 17:31:03

金乌Y · 2023-05-18 17:31:03 发布

本组件基于下文代码有所改动：element 下拉数据过多，导致列表卡顿加载慢，使用虚拟列表方式_element下拉框数据过多_风掠过有空白的博客-CSDN博客

一、问题描述

表单中某下拉框，由于数据过多，选择的时候会因为数据量过大导致页面卡顿，于是对于el-select进行二次封装，实现虚拟滚动。

二、实现如下：
可把代码拉下来查看：vue-demo: vueDemo （https://gitee.com/kyang00/vue-demo.git）

看起来是加载了全部数据，实际上只加载了自己设定的10条（可修改）数据。

Step1： npm install vue-virtual-scroll-list --save

Step2：创建两个文件

一、Select.vue

<template>
  <div>
    <el-select
      popper-class="virtualselect"
      class="virtual-select-custom-style"
      :value="defaultValue"
      filterable
      :filter-method="filterMethod"
      default-first-option
      clearable
      :placeholder="placeholder"
      :disabled="disabled"
      :multiple="isMultiple"
      :collapse-tags="collapseTags"
      :allow-create="allowCreate"
      @visible-change="visibleChange"
      v-on="$listeners"
      v-bind="$attrs"
      @clear="clearChange"
      @focus="focusChange"
    >
      <virtual-list
        ref="virtualList"
        class="virtualselect-list"
        :data-key="value"
        :data-sources="selectArr"
        :data-component="itemComponent"
        :keeps="keepsParams"
        :extra-props="{
          label: label,
          value: value,
          isRight: isRight,
          isConcat: isConcat,
          concatSymbol: concatSymbol,
          concatPropArr: concatPropArr,
          isDifferent: isDifferent,
          selectOptionWidth: selectOptionWidth
        }"
      ></virtual-list>
    </el-select>
  </div>
</template>
<script>
  const validatenull = (val) => {
    if (typeof val === 'boolean') {
      return false
    }
    if (typeof val === 'number') {
      return false
    }
    if (val instanceof Array) {
      if (val.length===0) return true
    } else if (val instanceof Object) {
      if (JSON.stringify(val) === '{}') return true
    } else {
      if (val==='null' || val===null || val==='undefined' || val===undefined || val==='') return true
      return false
    }
    return false
  }
  import virtualList from 'vue-virtual-scroll-list'
  import ElOptionNode from './elOptionNode.vue'
  export default {
    name: 'VirtualSelect',
    components: {
      'virtual-list': virtualList
    },
    model: {
      prop: 'defaultValue',
      event: 'change'
    },
    props: {
      // 数组
      list: {
        type: Array,
        default() {
          return []
        }
      },
      // 显示名称
      label: {
        type: String,
        default: ''
      },
      // 标识
      value: {
        type: String,
        default: ''
      },
      // 是否拼接字段
      isConcat: {
        type: Boolean,
        default: false
      },
      // 拼接字段的符号
      concatSymbol: {
        type: String,
        default: ' | '
      },
      // 要拼接的字段
      concatPropArr: {
        type: Array,
        default() {
          return []
        }
      },
      // 反显是否与下拉选项不同
      isDifferent: {
        type: Boolean,
        default: false
      },
      // 显示右边
      isRight: {
        type: Boolean,
        default: false
      },
      // 加载条数
      keepsParams: {
        type: Number,
        default: 10
      },
      // 绑定值 v-model
      defaultValue: {
        type: [Number, String, Array],
        // default() {
        //   if (typeof this.defaultValue === 'string') {
        //     return ''
        //   } else if (typeof this.defaultValue === 'number') {
        //     return null
        //   } else {
        //     return []
        //   }
        // }
      },
      // 是否多选
      isMultiple: {
        type: Boolean,
        default: false
      },
      // 多选折叠标签
      collapseTags: {
        type: Boolean,
        default: false
      },
      // 输入框占位文本
      placeholder: {
        type: String,
        default: '请选择'
      },
      // 是否禁用
      disabled: {
        type: Boolean,
        default: false
      },
      // 是否允许创建条目
      allowCreate: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        itemComponent: ElOptionNode,
        selectArr: [],
        selectOptionWidth: null, // 下拉框宽度
        dataList: []
      }
    },
    watch: {
      'list'() {
        this.init()
      },
      defaultValue: {
        handler(val, oldVal) {
          if (validatenull(val)) this.clearChange()
          this.init()
        },
        immediate: false,
        deep: true
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        this.list.forEach(item => {
          if (validatenull(item[this.label])) {
            item[this.label] = item[this.value]
          }
        })
        this.dataList = this.list
        if (!this.defaultValue || this.defaultValue?.length === 0) {
          this.selectArr = this.dataList
        } else {
          // 回显问题
          // 由于只渲染固定keepsParams（10）条数据,当默认数据处于10条之外,在回显的时候会显示异常
          // 解决方法:遍历所有数据,将对应回显的那一条数据放在第一条即可
          this.selectArr = JSON.parse(JSON.stringify(this.dataList))
          let obj = {}
          if (!this.isMultiple) {
            if (this.allowCreate) {
              const arr = this.selectArr.filter(val => {
                return val[this.value] === this.defaultValue
              })
              if (arr.length === 0) {
                const item = {}
                item[this.value] = this.defaultValue
                item[this.label] = this.defaultValue
                item.allowCreate = true
                this.selectArr.push(item)
                this.$emit('selChange', item)
              } else {
                this.$emit('selChange', arr[0])
              }
            }

            // 单选
            for (let i = 0; i < this.selectArr.length; i++) {
              const element = this.selectArr[i]
              if (element[this.value]?.toString()?.toLowerCase() === this.defaultValue?.toString()?.toLowerCase()) {
                obj = element
                this.selectArr?.splice(i, 1)
                break
              }
            }
            this.selectArr?.unshift(obj)
          } else if (this.isMultiple) {
            if (this.allowCreate) {
              this.defaultValue?.map(v => {
                const arr = this.selectArr.filter(val => {
                  return val[this.value] === v
                })
                if (arr?.length === 0) {
                  const item = {}
                  item[this.value] = v
                  item[this.label] = v
                  item.allowCreate = true
                  this.selectArr.push(item)
                  this.$emit('selChange', item)
                } else {
                  this.$emit('selChange', arr[0])
                }
              })
            }

            // 多选
            for (let i = 0; i < this.selectArr.length; i++) {
              const element = this.selectArr[i]
              this.defaultValue?.map(val => {
                if (element[this.value]?.toString()?.toLowerCase() === val?.toString()?.toLowerCase()) {
                  obj = element
                  this.selectArr?.splice(i, 1)
                  this.selectArr?.unshift(obj)
                }
              })
            }
          }
        }
      },
      // 搜索
      filterMethod(query) {
        if (!validatenull(query?.trim())) {
          this.$refs.virtualList.scrollToIndex(0) // 滚动到顶部
          setTimeout(() => {
            const orgArr = this.dataList.filter(item => {
              let result = item[this.label]?.toLowerCase()?.indexOf(query?.trim()?.toLowerCase()) > -1
              if (this.isRight || this.isConcat) {
                const concatPropArr = validatenull(this.concatPropArr) ? [this.label, this.value] : this.concatPropArr
                const checkResArr = concatPropArr.map(prop => {
                  return item[prop]?.trim()?.toLowerCase()?.indexOf(query?.trim()?.toLowerCase()) > -1
                })
                result = checkResArr.some(val => val)
              }
              return result
            })
            this.selectArr = this.handleSort(orgArr) || []
          }, 100)
        } else {
          setTimeout(() => {
            this.init()
          }, 100)
        }
      },
      // 按拼音字母数字顺序排序
      handleSort(arr) {
        const sortArr = arr.sort((a, b) => {
          const reg = /[a-zA-Z0-9]/
          const x = a[this.label],
                y = b[this.label]
          if (reg.test(x) || reg.test(y)) {
            if (x > y) {
              return 1
            } else if (x < y) {
              return -1
            } else {
              return 0
            }
          } else {
            return x.localeCompare(y)
          }
        })
        return sortArr
      },
      visibleChange(bool) {
        if (!bool) {
          this.$refs.virtualList.reset()
          this.init()
        }
      },
      clearChange() {
        this.visibleChange(false)
      },
      focusChange(event) {
        this.setOptionWidth(event)
      },
      setOptionWidth(event) {
        // 下拉框弹出时，设置弹框的宽度
        this.$nextTick(() => {
          this.selectOptionWidth = event.srcElement.offsetWidth + 'px'
          if (this.isMultiple) {
            this.selectOptionWidth = event.srcElement.offsetParent.clientWidth + 25 + 'px'
          }
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
// .virtualselect ::v-deep .el-select-dropdown__item {
// // .virtual-select-custom-style ::v-deep .el-select-dropdown__item {
//   // 设置最大宽度，超出省略号，鼠标悬浮显示
//   // options 需写 :title="source[label]"
//   // width: 250px;
//   // display: inline-block;
//   // overflow: hidden;
//   // text-overflow: ellipsis;
//   // white-space: nowrap;
//   // z-index: 9;
// }

.virtualselect {
  // 设置最大高度
  max-height:245px;
  overflow-y:auto;
  // &-list {
  //   max-height:245px;
  //   overflow-y:auto;
  // }
}
.virtualselect-list {
  max-height:245px;
  overflow-y:auto;
}
.el-select {
  width: 100%;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: transparent;
  cursor: pointer;
  margin-right: 5px;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(144,147,153,.3) !important;
  border-radius: 3px !important;
}
::-webkit-scrollbar-thumb:hover{
  background-color: rgba(144,147,153,.5) !important;
}
::-webkit-scrollbar-track {
  background-color: transparent !important;
  border-radius: 3px !important;
  -webkit-box-shadow: none !important;
}
::v-deep  .el-select__tags {
  flex-wrap: unset;
  overflow: auto;
}
</style>
<style>
.virtualselect .el-select-dropdown__item{
  display: block;
  /* max-width: 350px; */
  overflow: visible;
}
.virtualselect .el-scrollbar__bar.is-vertical {
  width: 0px;
}
</style>

二、el-option-node.vue

<template>
  <el-option
    :key="label+value"
    :label="isDifferent ? source[label] : handleConcat()"
    :value="source[value]"
    :disabled="source.disabled"
    :title="handleConcat()"
    :style="{width: selectOptionWidth, 'min-width': '200px'}"
  >
    <span>{{ handleConcat() }}</span>
    <span
      v-if="isRight"
      style="float:right;color:#939393"
    >{{ source[value] }}</span>
  </el-option>
</template>
<script>
  const validatenull = (val) => {
    if (typeof val === 'boolean') {
      return false
    }
    if (typeof val === 'number') {
      return false
    }
    if (val instanceof Array) {
      if (val.length===0) return true
    } else if (val instanceof Object) {
      if (JSON.stringify(val) === '{}') return true
    } else {
      if (val==='null' || val===null || val==='undefined' || val===undefined || val==='') return true
      return false
    }
    return false
  }
  export default {
    name: 'ElOptionNode',
    props: {
      // 每一行的索引
      index: {
        type: Number,
        default: 0
      },
      // 每一行的内容
      source: {
        type: Object,
        default() {
          return {}
        }
      },
      // 需要显示的名称
      label: {
        type: String,
        default: ''
      },
      // 绑定的值
      value: {
        type: String,
        default: ''
      },
      // 是否拼接字段
      isConcat: {
        type: Boolean,
        default: false
      },
      // 拼接字段的符号
      concatSymbol: {
        type: String,
        default: ' | '
      },
      // 要拼接的字段
      concatPropArr: {
        type: Array,
        default() {
          return []
        }
      },
      // 反显是否与下拉选项不同
      isDifferent: {
        type: Boolean,
        default: false
      },
      // 右侧是否显示绑定的值
      isRight: {
        type: Boolean,
        default() {
          return false
        }
      },
      selectOptionWidth: {
        type: String,
        default: '350px'
      }
    },
    methods: {
      handleConcat(){
        let result = this.source[this.label]
        if (this.isConcat) {
          const concatPropArr = validatenull(this.concatPropArr) ? [this.label, this.value] : this.concatPropArr
          result = concatPropArr.map(item => {
            return this.source[item]
          })
          .filter(val => !validatenull(val))
          .join(this.concatSymbol)
        }
        return result
      },
      concatString(a, b) {
        a = a || ''
        b = b || ''
        if (this.isConcat) {
          return a + ((a && b) ? this.concatSymbol : '') + b
        }
        return a
      }
    }
  }
</script>

三、utils index.js

/**
 * 判断是否为空
 */
export function validatenull(val) {
  if (typeof val === 'boolean') {
    return false;
  }
  if (typeof val === 'number') {
    return false;
  }
  if (val instanceof Array) {
    if (val.length===0) return true;
  } else if (val instanceof Object) {
    if (JSON.stringify(val) === '{}') return true;
  } else {
    if (val==='null' || val===null || val==='undefined' || val===undefined || val==='') return true;
    return false;
  }
  return false;
}

四、组件使用

<template>
  <div>
    <virtual-select
      v-model="selectValue"
      :list="selectValueOptions"
      label="name"
      value="code"
      :placeholder-params="'请选择(单选)'"
      :keeps-params="10"
      :is-concat="true"
      :concat-symbol="' || '"
      :is-multiple="false"
      @change="changeVal"
    />
    <virtual-select
      v-model="selectValue2"
      :list="selectValueOptions"
      label="name"
      value="code"
      placeholder-params="请选择(多选)"
      :keeps-params="10"
      :is-concat="false"
      :is-multiple="true"
      :is-right="true"
      :allow-create="true"
      @change="changeVal"
    />
  </div>
</template>

<script>
// 引入组件
import VirtualSelect from '@/components/common/VirtualSelect/Select'
export default {
  name: 'VirtualSelectDemo',
  // 注册组件
  components: { VirtualSelect },
  data () {
    return {
      selectValue: null,
      selectValue2: null,
      selectValueOptions: []
    }
  },
  created() {
    // 测试数据，可指定渲染多少条数据。如 this.getList(20000, 1000)
    // 实际运用，直接把调用后端的接口，把返回的结果赋值给下拉选值集就好:list="selectValueOptions"
    this.getList(10000, 1000).then(res => {
        this.selectValueOptions = res
    })
  },
  methods: {
    changeVal(val) {
      console.log(val, 'val')
    },
    getList(num = 10000, time) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
            const tempArr = []
            let count = num
            while (count--) {
                const index = num - count
                tempArr.push({
                    code: `${index}$${Math.random().toString(16).substring(9)}`,
                    index,
                    name: `测试数据-${index}`,
                    value: index
                })
            }
            resolve(tempArr)
        }, time)
      })
    },
  }
}
</script>
<style scoped>
</style>

总结：

list的值是自己的选择框下拉值集数据。

label 和value和v-model和原来的el-select属性一样。基本能满足一般需求。

keepsParams 显示滚动加载的条数

具体解释请看文档：VirtualSelect.md

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

仓颉共学创作营正式启动！邀您共探新兴技术，解锁仓颉创作红利

GitCode 开源社区

SCI论文快速写作指南：沁言学术实用方法

在SCI论文写作领域，尤其针对CSDN社区内的计算机科学、AI和算法优化研究者，高效方法的应用已成为提升投稿成功率的关键。AI工具的整合能显著优化从检索到润色的流程。本文基于公开调研数据和用户案例，剖析SCI写作难点，并以沁言学术为例，探讨实用方法与技术机制。重点在于算法深度与效率insights，旨在为CSDN用户提供可操作的指导，帮助科研人员加速SCI论文产出。

GitCode 开源社区

高校科研团队文献协作工具推荐

在高校科研团队中，尤其针对CSDN社区内的计算机科学、AI和大数据领域，文献协作是推动项目进展的核心。传统方法往往因信息孤岛和版本冲突而低效，AI工具的引入能优化这一流程。本文基于公开调研数据和用户案例，剖析协作痛点，并以沁言学术为例，探讨其功能机制与应用策略。重点在于技术深度与团队insights，旨在为CSDN用户提供可借鉴的路径，帮助科研团队提升文献协作效率。