最近开发项目的时候遇到一个问题，使用Element ui Cascader 级联选择器，数据过大页面就会卡顿，而select组件不会卡顿，通过网上参考文献，于是想到将select+tree结合使用，实现类似功能，如下：

<template>
  <div class="system-content">
    <el-select ref="select" v-model="value" clearable @visible-change="visibleChange">
      <el-option v-for="item in formatData(list,[])" :key="item.value" :label="item.label" :value="item.value" style="display: none;" />
      <el-input
        v-model="filterText"
        class="serachInput"
        clearable
        placeholder="输入关键字进行过滤"
      />
      <el-tree
        ref="treeOption"
        accordion
        class="tree"
        :data="list"
        node-key="id"
        highlight-current
        :props="defaultProps"
        :current-node-key="value"
        :filter-node-method="filterNode"
        @node-click="handleNodeClick"
      />
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filterText: '',
      value: '',
      list: [{
        id: 1,
        label: '测试1',
        children: [{
          id: 2,
          label: '测试11',
          children: [
            { id: 3, label: '测试111', children: [{ id: 8, label: '测试1111' }] },
            { id: 4, label: '测试112' }
          ]
        }]
      }, {
        id: 5,
        label: '测试2',
        children: [
          { id: 6, label: '测试21' },
          { id: 7, label: '测试22' }
        ]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  watch: {
    // 过滤树形选项
    filterText(val) {
      this.$refs.treeOption.filter(val)
    }
  },
  methods: {
    // 下拉清空过滤条件
    visibleChange(flag) {
      if (flag) {
        this.filterText = ''
      }
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 将多级list数据转化为一级
    formatData(data, options) {
      data.forEach((item, key) => {
        options.push({ label: item.label, value: item.id })
        if (item.children) this.formatData(item.children, options)
      })
      return options
    },
    // 选中节点给select赋值
    handleNodeClick(node) {
      this.value = node.id
      this.$refs.select.blur()
    }
  }
}
</script>

<style>
.serachInput{margin: 0 10px;width: -webkit-fill-available;}
.tree .el-tree-node .is-current > .el-tree-node__content{font-weight: 700; color: #409eff;}
.tree .el-tree-node.is-current > .el-tree-node__content{font-weight: 700; color: #409eff;}
</style>