el-select虚拟滚动

首先下载虚拟滚动的依赖

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

主页面 index.vue

<template>
  <el-select v-model="value1"
             filterable
             :filter-method="remoteMethod"
             multiple
             clearable
             v-bind="$attrs"
             v-on="$listeners"
             @change="handleChange"
             placeholder="请选择">
    <!-- <el-option v-for="(item,index) in tableList"
                       :key="index"
                       :label="item.tableCnName"
                       :value="item.targetTableId">
            </el-option> -->

    <vue-virtual-list ref="virtualList"
                      style="overflow-y: auto;max-height:230px;"
                      :data-key="'targetTableId'"
                      :data-sources="sourcesList"
                      :data-component="itemComponent"
                      :keeps="20"
                      :extra-props="extraProps"></vue-virtual-list>
  </el-select>
</template>

<script>
import VueVirtualList from 'vue-virtual-scroll-list'
import itemComponent from './itemComponent'
export default {
  name: 'virtualSelect',
  props: {
    value: {
      type: [String, Number, Array],
      default: ''
    },
    extraProps: {
      type: Object,
      default: () => {
        return {
          label: 'tableCnName',
          value: 'targetTableId'
        }
      }
    },
    list: {
      type: Array
    }
  },
  components: {
    itemComponent,
    VueVirtualList
  },
  data () {
    return {
      itemComponent,
      value1: '',
      sourcesList: []

    }
  },
  watch: {
    value: {
      handler (newVal) {
        this.value1 = newVal
      }
    },
    list: {
      handler (newVal) {
        this.sourcesList = newVal
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    remoteMethod (query) {
      if (query !== '') {
        this.sourcesList = this.list.filter((item) => {
          return (
            item[this.extraProps.label]
              .toLowerCase()
              .indexOf(query.toLowerCase()) > -1
          )
        })
      } else {
        this.sourcesList = this.list
      }
      console.log(this.sourcesList)
    },
    handleChange () {
      this.$emit('input', this.value1)
    }
  }
}
</script>

<style>
</style>

item页面

<template>
    <div>
      <el-option
          :key="label + value"
          :label="source[label]"
          :value="source[value]"
          class="elOption"
      >
        <span>{{ source[label] }}</span>
        <span v-if="rightLabel" style="float:right;color:#939393">{{
            source[rightLabel]
          }}</span>
      </el-option>
    </div>
  </template>

<script>
export default {
  name: 'item-component',
  props: {
    // index of current item
    // 每一行的索引
    index: {
      type: Number
    },
    // 每一行的内容
    source: {
      type: Object,
      default () {
        return {}
      }
    },
    // 需要显示的名称
    label: {
      type: String
    },
    // 绑定的值
    value: {
      type: String
    },
    // 右侧显示绑定的值,为空则不显示
    rightLabel: {
      type: String,
      default: ''
    }
  },
  mounted () {}
}
</script>
<style scoped>
.elOption {
    width: 600px;
}
</style>