针对上万级别Tree树节点和Table表格性能卡顿问题优化(使用umy-ui虚拟表ux-grid)

问题：使用vue+iview或者vue+element-ui等，在完善表格功能的同时，遇到几万几十万的表格数据，渲染特别慢，甚至会发生表格卡顿的问题，体验感非常不好

解决方式：将原来的tablet替换成umy-ui的虚拟表ux-grid。umy-ui的虚拟表ux-grid是对于列表形态的数据展示的按需渲染，根据容器元素的高度以及列表项元素的高度来显示长列表数据中的某一个部分，而不是去完整地渲染长列表，换句话说，就是每次只渲染可视区域

具体使用方式官方开发文档里面都有，umy-ui官网教程：umy-ui开发文档 - 为开发者准备的基于 Vue 2.0 的桌面端组件库，完美解决表格万级数据渲染卡顿问题

在这里附上替换教程，比如说，原来项目使用的是vue+iview，怎么替换为umy-ui的虚拟表ux-grid

1.引入umy-ui依赖

 npm install umy-ui

2.在main.js引入以下内容

import { UTable, UTableColumn, UxGrid, UxTableColumn } from 'umy-ui';
import 'umy-ui/lib/theme-chalk/index.css';

Vue.use(UTable);
Vue.use(UTableColumn);
Vue.use(UxGrid);
Vue.use(UxTableColumn);

3.创建u-table组件用于替换

<template>
  <div>
    <ux-grid
      border
      ref="plxTable"
      :height="height"
      size="small"
      @selection-change="selectionChange"
      @row-dblclick="handleRowDblClick"
      @select-all="handleSelectAll"
      @select="selectTableData"
      style="border-left:0;border-bottom:1px solid #d7dde4;"
      class="ux-grid-table">
      <ux-table-column className="compact-cell" fixed="left" type="checkbox" width="40" align="center" field="selection"/>
      <ux-table-column className="compact-cell" fixed="left" title="序号" type="index" width="50" align="center" field="index"/>
      <ux-table-column
          v-for="item in columns"
          :key="item.id"
          :field="item.field"
          :title="item.title"
          :width="item.width"/>
    </ux-grid>
  </div>
</template>

<script>
export default { 
  data() {
    return {}
  },
  props: {
    columnsWithRulesField: {
      type: Array,
    },
    tableDatas: {
      type: Array,
    },
    height: {
      type: Number,
      default: 500
    },
    library: {
      type: Object,
    }
  },
  computed: {
  },
  watch: {
    //监听的数据变化  以自己的数据封装格式为准
    tableDatas(newValue) {
      this.$refs.plxTable.reloadData(newValue)
      if (newValue && newValue.length > 0) {
        let arr = []
        //newValue 中属性selected = true 代表上一页选中 设置选中状态 回显
        newValue.forEach(item => {
          arr.push({row: item, selected: item.selected ? item.selected : false})
        })
        //把选中的数据放入表格中
        this.$refs.plxTable.toggleRowSelection(arr)
      }
    }
  },
  mounted() {

  },
  methods: {
    //selection选中得数据，row当前选中行
    selectTableData(selection, row) {
      let isContain = selection.find((v) => {
        return v.id == row.id;
      });
      //取消单个
      if (!isContain) {
        this.$emit("on-select-cancel", selection, row)
      }
    },
    //选中所有或取消所有
    handleSelectAll(rows) {
      //全选
      if (rows.length > 0) {
        //on-select-all是原来table的事件名
        this.$emit("on-select-all", rows)
        //全部取消
      } else {
        this.$emit("on-select-all-cancel")
      }

    },
    //选中数据发生变化
    selectionChange(row) {
      this.$emit("on-selection-change", row)
    },
    //双击行
    handleRowDblClick(row, index) {
      this.$emit("on-row-dblclick", row, index)
    }
  }
}
</script>

<style scoped>

</style>

4.使用这个组件即可，因为在u-table里面已经替换过了绑定的方法等，所以原来table写法不变，只需要替换组件名，其他一切不变。

5.效果图