基于vue element-UI 的 virtual-tree （虚拟树）

使用 @femessage/element-ui 插件 详情

1.安装
npm i @femessage/element-ui -S

2.引入

import { Tree as virtualTree } from '@femessage/element-ui'
Vue.component('virtualTree', virtualTree)

3.使用

注：1.虚拟滚动必须固定height

2.element-ui 的树搜索依赖dom。所以虚拟滚动会对搜索有影响。自定义搜索方法

   <virtual-tree
      :data="tableShowData"
      show-checkbox
      node-key="id"
      ref="tree"
      :height="300"
    >
      <div class="tree-node-content" slot-scope="{ node, data }">
        <span >{{data.name}}</span>
      </div>
    </virtual-tree>
<script>

console.log('parentparentparent', parent)
export default {
  data() {
    return {
      filterText:'',
      text: '',
      tableShowData: [],
      tableData: [
        {
          id: 'id-1',
          date: '2016-05-02',
          name: '王小虎01',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          id: 'id-2',
          date: '2016-05-04',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          id: 'id-3',
          date: '2016-05-01',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [],
        },
        {
          id: 'id-4',
          date: '2016-05-03',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 1516 弄',
        },
        {
          id: 'id-5',
          date: '2016-05-03',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 1516 弄',
        },
        {
          id: 'id-6',
          date: '2016-05-03',
          name: '王小虎5',
          address: '上海市普陀区金沙江路 1516 弄',
        },
        {
          id: 'id-7',
          date: '2016-05-03',
          name: '王小虎6',
          address: '上海市普陀区金沙江路 1516 弄',
        },
        {
          id: 'id-8',
          date: '2016-05-03',
          name: '王小虎7',
          address: '上海市普陀区金沙江路 1516 弄',
        },
        {
          id: 'id-9',
          date: '2016-05-03',
          name: '王小虎8',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ]
    }
  },

  created() {
    let children = []
    for (var i = 0; i < 30000; i++) {
      children.push({
        id: i + '-id',
        pId: 'id-3',
        date: '2016-05-01',
        name: '王小虎5-' + i,
        address:
          '上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1519 弄',
      })
    }
    this.tableData[2].children = children
    console.log(this.tableData)
    this.tableShowData = this.tableData
    
    // 
  },
  methods: {
    addArr(pNode,arr,value){
      for(var i=0;i<arr.length;i++){
        if(arr[i].name.indexOf(value) !== -1){
          this.tableShowData.push(arr[i])
          if(pNode){
            this.tableShowData.push(pNode)
          }
        }
        if(arr[i].children && arr[i].children.length > 0){
          let node = JSON.parse(JSON.stringify(arr[i]))
          delete node.children
          this.addArr(node, arr[i].children, value)
        }
      }
    },
    toTree(data, id = 'id', pid = 'pId') {
      const result = []
      const map = {}
      if (!Array.isArray(data)) {
        return result
      }
      data.forEach(item => {
        delete item.children
      })
      data.forEach(item => {
        map[item[id]] = item
      })
      data.forEach(item => {
        const parent = map[item[pid]]
        if (parent) {
          // add parent
          if (!parent.children) {
            parent.children = []
          }
          // add level
          if (!parent.level) {
            parent.level = 1
          }
          item.level = parent.level + 1
          parent.children.push(item)
        } else {
          result.push(item)
        }
      })
      return result
    },
    filterNode(text) {
      debugger
      let value = this.filterText || text
      let time1 = new Date().getTime()
      if (!value) {
        this.tableShowData = JSON.parse(JSON.stringify(this.tableData))
        return true
      }
      let data = JSON.parse(JSON.stringify(this.tableData))
      this.tableShowData = []
      this.addArr(null,data,value)
      // 去重
      this.tableShowData = Array.from(new Set(this.tableShowData))
      this.text = '搜索到' + this.tableShowData.length + '节点， '
      // 转树
      this.tableShowData = this.toTree(this.tableShowData)
      this.text += 'JS运行时间' + ( new Date().getTime() - time1 ) + 'ms'
    }
  },
}
</script>