vue2实现虚拟滚动select下拉组件-上万条数据下拉支持过滤（样式仿el-select）

Love The Way You Lie 2024-03-17 21:01 48阅读 0赞

vue3中element-plus组件库有虚拟滚动select，然而维护的是vue2项目，遇到后端要返回9000条数据的情况，需要进行下拉选择并且可以过滤

<template>
      <div class="e-stat__select" :style="{ width: width, minWidth: minWidth }">
        
        <div class="e-select-main">
          
          <div
            class="e-select--mask"
            v-if="showSelector"
            @click="showSelector = false"
          />
          <div
            class="e-select"
            :class="{
              'e-select-disabled': disabled,
              isfocus: focus || showSelector,
            }"
          >
            <div class="e-select__input-box" @click.stop="openSelectList">
              
              <input
                class="e-select__input-text"
                v-model="currentData"
                :placeholder="placeholder"
                @input="filter"
                @focus="focus = true"
                @blur="focus = false"
                v-if="search && !disabled"
              />
              <div class="e-select__input-text" v-else>
                {
       { currentData || currentData === 0 ? currentData : placeholder }}
              </div>
              
              
              <div class="e-select-icon" @click.stop="toggleSelector" v-else>
                <i
                  class="el-icon-arrow-up arrowAnimation"
                  :class="showSelector ? 'top' : 'bottom'"
                />
              </div>
            </div>
            
            <transition name="el-zoom-in-top">
              <div class="e-select__selector" v-if="showSelector">
                
                <div class="e-popper__arrow"></div>
                
                <div
                  class="e-select__selector-scroll"
                  @scroll="scroll"
                  ref="scroll"
                >
                  <div class="parentDom">
                    
                    <div :style="{ height: screenHeight + 'px' }"></div>
                    <div
                      class="positionRelative"
                      :style="{ transform: getTransform }"
                    >
                      
                      <div
                        class="e-select__selector-empty"
                        v-if="currentOptions.length === 0"
                      >
                        <div>{
       { emptyTips }}</div>
                      </div>
                      
                      <div
                        v-else
                        class="e-select__selector-item"
                        :class="[
                          { highlight: currentData == item[props.text] },
                          {
                            'e-select__selector-item-disabled':
                              item[props.disabled],
                          },
                        ]"
                        v-for="(item, index) in visibleData"
                        :key="index"
                        @click.stop="change(item)"
                      >
                        <div>{
       { item[props.text] }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </transition>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
          
      name: "e-vir-select",
      data() {
          
        return {
          
          // 当前值
          currentData: "",
          // 当前选项列表
          currentOptions: [],
          /** 是否显示下拉选择列表 */
          showSelector: false,
          /** 偏移高度 */
          startOffset: 0,
          /** 起始显示数据 */
          start: 0,
          /** 结束显示数据 */
          end: 10,
          /** 预留的dom，避免快速滚动空白 */
          remain: 40,
          focus: false,
        };
      },
      props: {
          
        // 选项列表
        options: {
          
          type: Array,
          default() {
          
            return [];
          },
        },
        // 选项列表数据格式
        props: {
          
          type: Object,
          default() {
          
            return {
          
              value: "value",
              text: "text",
              disabled: "disabled",
            };
          },
        },
        // vue2 v-model传值方式
        value: {
          
          type: [String, Number],
          default: "",
        },
        // vue3 v-model传值方式
        modelValue: {
          
          type: [String, Number],
          default: "",
        },
        // 占位
        placeholder: {
          
          type: String,
          default: "请选择",
        },
        // 宽度
        width: {
          
          type: String,
          default: "500px",
        },
        // 最小宽度
        minWidth: {
          
          type: String,
          default: "120px",
        },
        // 空值占位
        emptyTips: {
          
          type: String,
          default: "暂无选项",
        },
        // 是否可清除
        clear: {
          
          type: Boolean,
          default: false,
        },
        // 是否整体禁用
        disabled: {
          
          type: Boolean,
          default: false,
        },
        // 每条数据的高度，注意注意，只支持px，修改每条数据的css高度后，才需要改变这个值
        itemSize: {
          
          type: Number,
          default: 34,
        },
        // 启动搜索模式
        search: {
          
          type: Boolean,
          default: true,
        },
      },
      watch: {
          
        options: {
          
          handler() {
          
            this.currentOptions = this.options;
            this.initData();
          },
          deep: true,
          immediate: true,
        },
        modelValue: {
          
          handler() {
          
            this.initData();
          },
          immediate: true,
        },
        value: {
          
          handler() {
          
            this.initData();
          },
          immediate: true,
        },
      },
      computed: {
          
        /** 根据每条数据的高度获取总列表高度,最低一个元素 */
        screenHeight() {
          
          return Math.max(
            this.itemSize,
            this.currentOptions.length * this.itemSize
          );
        },
        /** 前面预留 */
        prevCount() {
          
          return Math.min(this.start, this.remain);
        },
        /** 后面预留 */
        nextCount() {
          
          return Math.min(this.remain, this.end);
        },
        /** 每次截取虚拟列表的位置 */
        getTransform() {
          
          return `translate(0,${ this.startOffset}px)`;
        },
        /** 虚拟数据 */
        visibleData() {
          
          return this.currentOptions.slice(
            this.start,
            Math.min(this.end, this.currentOptions.length)
          );
        },
      },
      methods: {
          
        /** 处理数据，此函数用于兼容vue2 vue3 */
        initData() {
          
          this.currentData = "";
          // vue2
          if (this.value || this.value === 0) {
          
            for (let item of this.options) {
          
              if (item[this.props.value] === this.value) {
          
                this.currentData = item[this.props.text];
                this.$emit("getText", this.currentData);
                return;
              }
            }
          }
          // vue3
          if (this.modelValue || this.modelValue === 0) {
          
            for (let item of this.options) {
          
              if (item[this.props.value] === this.modelValue) {
          
                this.currentData = item[this.props.text];
                this.$emit("getText", this.currentData);
                return;
              }
            }
          }
        },
        /** 过滤选项列表 */
        filter() {
          
          if (this.currentData) {
          
            this.currentOptions = this.options.filter((item) => {
          
              return item[this.props.text].indexOf(this.currentData) > -1;
            });
          } else {
          
            this.currentOptions = this.options;
            this.$emit("change", "清空");
            this.emit("");
          }
          this.$refs.scroll.scrollTop = 0;
        },
        /** 选择选项 */
        change(item) {
          
          const {
           disabled, value } = this.props;
          if (item[disabled]) return;
          this.$emit("change", item);
          this.emit(item[value]);
          this.currentData = item[this.props.text];
          this.currentOptions = this.options;
          this.showSelector = false;
        },
        /** 还原值,清空值 */
        clearVal() {
          
          this.showSelector = false;
          this.start = 0;
          this.end = 5;
          this.startOffset = 0;
          this.$emit("change", "清空");
          this.emit("");
        },
        /** 兼容vue2、vue3的v-model传值 */
        emit(value) {
          
          this.$emit("input", value);
          this.$emit("update:modelValue", value);
        },
        /** 打开选择列表 */
        openSelectList() {
          
          if (this.disabled || this.showSelector) return;
          this.showSelector = true;
          // 找到当前值所在的索引
          if (this.currentData) {
          
            this.currentOptions = this.options;
            for (let i = 0; i < this.options.length; i++) {
          
              if (this.options[i][this.props.text] === this.currentData) {
          
                this.start = i;
                break;
              }
            }
            this.end = this.start + this.nextCount + this.remain; // 此时的结束索引
            this.startOffset = this.start * this.itemSize; // 此时的偏移量
            this.$nextTick(() => {
          
              this.$refs.scroll.scrollTop = this.start * this.itemSize; // 设置滚动
            });
          } else {
          
            this.currentOptions = this.options;
            this.scrollFn(0);
            this.$nextTick(() => {
          
              this.$refs.scroll.scrollTop = 0; // 设置滚动
            });
          }
        },
        /** 切换选择列表显示, */
        toggleSelector() {
          
          if (this.disabled) return;
          this.showSelector = !this.showSelector;
          this.currentOptions = this.options;
        },
        /** 滚动事件 */
        scroll(e) {
          
          this.scrollFn(e.target.scrollTop);
        },
        /** 滚动函数 */
        scrollFn(scrollTop) {
          
          // 此时的开始索引
          this.start =
            Math.floor(scrollTop / this.itemSize) - this.prevCount - this.remain >=
            0
              ? Math.floor(scrollTop / this.itemSize) - this.prevCount - this.remain
              : 0;
          this.end = this.start + this.nextCount + this.remain * 2; // 此时的结束索引
          this.startOffset = this.start * this.itemSize; // 此时的偏移量
        },
      },
    };
    </script>
    
    <style lang="scss" scoped>
    /deep/ ::-webkit-scrollbar {
          
      width: 7px;
      height: 7px;
    }
    
    /deep/ ::-webkit-scrollbar-thumb {
          
      border-radius: 10px;
      min-height: 70px;
      background-color: #dedfe1;
    }
    
    .e-stat__select {
          
      display: flex;
      align-items: center;
      cursor: pointer;
      box-sizing: border-box;
      min-width: 100%;
      margin-right: 15px;
      .e-select-main {
          
        width: 100%;
      }
    
      .e-select-disabled {
          
        background-color: #f5f7fa;
        cursor: not-allowed;
      }
    
      .e-select--mask {
          
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
      }
    
      .e-select {
          
        font-size: 14px;
        box-sizing: border-box;
        border-radius: 4px;
        padding: 0 5px;
        position: relative;
        display: flex;
        user-select: none;
        flex-direction: row;
        align-items: center;
        border: 1px solid #dcdfe6;
        border-bottom: solid 1px #dddddd;
    
        .e-select__input-box {
          
          width: 100%;
          height: 34px;
          position: relative;
          display: flex;
          flex: 1;
          flex-direction: row;
          align-items: center;
    
          input {
          
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
          }
          .e-select-icon {
          
            width: 50px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
    
          .arrowAnimation {
          
            color: #c0c4cc;
            transition: transform 0.3s;
          }
    
          .top {
          
            transform: rotateZ(0deg);
          }
    
          .bottom {
          
            transform: rotateZ(180deg);
          }
    
          .e-select__input-text {
          
            padding-left: 7px;
            width: 100%;
            color: #333;
            font-size: 16px;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            overflow: hidden;
          }
        }
    
        .e-select__selector {
          
          box-sizing: border-box;
          position: absolute;
          top: calc(100% + 12px);
          left: 0;
          width: 100%;
          background-color: #ffffff;
          border: 1px solid #ebeef5;
          border-radius: 6px;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          z-index: 999;
          padding: 4px 0;
    
          .e-popper__arrow,
          .e-popper__arrow::after {
          
            position: absolute;
            display: block;
            width: 0;
            height: 0;
            left: 50%;
            border-color: transparent;
            border-style: solid;
            border-width: 6px;
          }
    
          .e-popper__arrow {
          
            filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
            top: -6px;
            left: 50%;
            transform: translateX(-50%);
            margin-right: 3px;
            border-top-width: 0;
            border-bottom-color: #ebeef5;
          }
    
          .e-popper__arrow::after {
          
            content: " ";
            top: 1px;
            margin-left: -6px;
            border-top-width: 0;
            border-bottom-color: #fff;
          }
    
          .e-select__selector-scroll {
          
            overflow: auto;
            max-height: 200px;
    
            .parentDom {
          
              position: relative;
    
              .positionRelative {
          
                width: 100%;
                position: absolute;
                left: 0;
                top: 0;
                font-size: 16px;
              }
            }
    
            .e-select__selector-empty,
            .e-select__selector-item {
          
              display: flex;
              cursor: pointer;
              /* prettier-ignore*/
              height: 34PX;
              /* prettier-ignore*/
              line-height: 34PX;
              font-size: 14px;
              text-align: center;
              padding: 0px 10px;
              box-sizing: border-box;
              white-space: nowrap;
            }
    
            .e-select__selector-item:hover {
          
              background-color: #f9f9f9;
            }
    
            .e-select__selector-empty:last-child,
            .e-select__selector-item:last-child {
          
              border-bottom: none;
            }
    
            .e-select__selector-item-disabled {
          
              color: #b1b1b1;
              cursor: not-allowed;
            }
    
            .highlight {
          
              color: #409eff;
              font-weight: bold;
            }
          }
        }
      }
    
      .isfocus {
          
        border: 1px solid #2f91f5;
      }
    }
    </style>