Vue el-table可编辑el-table 大量数据绑定渲染页面卡顿

Question

Vue el-table可编辑el-table 大量数据绑定渲染页面卡顿

问题遇到的现象和发生背景

1.当请求接口（请求耗时192ms）渲染响应数据时渲染卡顿，要等待5~8秒才会渲染完成（100多条数据）
2.滑动表格时页面卡顿
3.在表格编辑时输入内容时，通常需要卡顿1秒左右才会显示输入内容，没有输入即所见的效果

问题相关代码，请勿粘贴截图

表格列（37~44列（复合表头））其中可编辑（el-input）的表格列约7列左右：其中大部分列都向例1例2这样的表格列（其中有很多列的内容需要在用户输入框输入时实时计算数据绑定类似例2）表格是一个财务数据表格
例1代码：

 <el-table-column prop="subsidy" width="120" align="center">
              <template slot="header">
                <div>补贴</div>
                <div>
                  {{ '(' + Number(dataTotal.sum.subSidy).toLocaleString('en-US') + ')' }}
                </div>
              </template>
              <template scope="scope">
                <span>{{ Number(scope.row.subSidy).toLocaleString('en-US') }}</span>
              </template>
            </el-table-column>        

例2代码：

          <el-table-column prop="tzMoney" align="center" width="80">
            <template slot="header">
              <div>金额</div>
              <div>
                {{ '(' + Number(dataTotal.sum.totalTzMoney).toLocaleString('en-US') + ')' }}
              </div>
            </template>
            <template scope="scope">
              <el-row>
                  这列因为需要随着用户在行输入框输入人数改变而改变
                <span>{{ Number(scope.row.tzPeo * scope.row.tzStandard).toLocaleString('en-US') }}</span>
              </el-row>
            </template>
          </el-table-column>

运行结果及报错内容

1.第一次渲染卡顿约7秒
2.在行输入框输入内容的时候卡顿
3.滑动（上下左右）表格页面卡顿

我的解答思路和尝试过的方法

1.表格分页，当用户向下滑动的时候加载后续20条数据，（但是用户在行输入框输入内容时，可能需要一键应用到所有列输入框）
2.分批插入，第一次插入20条，然后定时器内间隔分批插入后续的数据
3.用原生input替换el-input，以减少el-input组件实例。并在原生input上应用el-input的样式，使前者后者外观一致。
在v-model指令上追加.lazy修饰符，使实例数据仅在失去焦点时更新，减少触发次数。

我想要达到的结果

1.页面上下左右滑动无卡顿，输入内容无卡顿，页面渲染无卡顿
2.要求需要展示所有行数据,因为用户在行输入框输入内容时，可能需要一键应用到所有列（部分列）输入框，（最终结果最多不超过400条），

Answer 1

减少对DOM节点的渲染，通过滚动函数节流实现滚动后事件来动态渲染数据
Element Table代码

<template>
  <div>
    <el-table border :data="filteredData" style="width: 100%" height="300" :data-size="tableData.length" v-loadmore="handelLoadmore">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="日期" width="180">
        <template slot-scope="scope">
          <div>
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="日期" width="180">
        <template slot-scope="scope">
          <div>
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="日期" width="180">
        <template slot-scope="scope">
          <div>
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="日期" width="180">
        <template slot-scope="scope">
          <div>
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <div>
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.name }}</p>
              <p>住址: {{ scope.row.address }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div>
            <el-button size="mini"  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger"  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  name: 'test',
  components: {},
  data () {
    return {
      tableData: [],
      currentStartIndex: 0,
      currentEndIndex: 20
    };
  },
  created () {
    this.getTableData();
  },
  computed: {
    filteredData () {
      return this.tableData.filter((item, index) => {
        if (index < this.currentStartIndex) {
          return false;
        } else if (index > this.currentEndIndex) {
          return false;
        } else {
          return true;
        }
      });
    }
  },
  methods: {
    handelLoadmore (currentStartIndex, currentEndIndex) {
      this.currentStartIndex = currentStartIndex;
      this.currentEndIndex = currentEndIndex;
    },
    getTableData () {
      let cont = 0;
      let tableData = [];
      while (cont < 30000) {
        cont = cont + 1;
        let object = {
          date: cont,
          name: '王小虎' + cont,
          address: '上海市普陀区金沙江路 cont 弄'
        }
        tableData.push(object);
      }
      setTimeout(() => {
        this.tableData = tableData;
      }, 2000);
    }
  },
  watch: {}
}
</script>

<style scoped>
.el-table__body-wrapper .el-table__row td {
  display: none;
}
.el-table__body-wrapper .el-table__row {
  height: 38px;
}
</style>

指令代码

// 设置默认溢出显示数量
var spillDataNum = 20;

// 设置隐藏函数
var timeout = false;
let setRowDisableNone = function (topNum, showRowNum, binding) {
  if (timeout) {
    clearTimeout(timeout);
  }
  timeout = setTimeout(() => {
    binding.value.call(null, topNum, topNum + showRowNum + spillDataNum);
  });
};

export default {
  name: 'loadmore',
  componentUpdated: function (el, binding, vnode, oldVnode) {
    setTimeout(() => {
      const dataSize = vnode.data.attrs['data-size'];
      const oldDataSize = oldVnode.data.attrs['data-size'];
      if(dataSize === oldDataSize){
        return;
      }
      const selectWrap = el.querySelector('.el-table__body-wrapper');
      const selectTbody = selectWrap.querySelector('table tbody');
      const selectRow = selectWrap.querySelector('table tr');
      if (!selectRow) {
        return;
      }
      const rowHeight = selectRow.clientHeight;
      let showRowNum = Math.round(selectWrap.clientHeight / rowHeight);

      const createElementTR = document.createElement('tr');
      let createElementTRHeight = (dataSize - showRowNum - spillDataNum) * rowHeight;
      createElementTR.setAttribute('style', `height: ${createElementTRHeight}px;`);
      selectTbody.append(createElementTR);

      // 监听滚动后事件
      selectWrap.addEventListener('scroll', function () {
        let topPx = this.scrollTop - spillDataNum * rowHeight;
        let topNum = Math.round(topPx / rowHeight);
        let minTopNum = dataSize - spillDataNum - showRowNum;
        if (topNum > minTopNum) {
          topNum = minTopNum;
        }
        if (topNum < 0) {
          topNum = 0;
          topPx = 0;
        }
        selectTbody.setAttribute('style', `transform: translateY(${topPx}px)`);
        createElementTR.setAttribute('style', `height: ${createElementTRHeight-topPx > 0 ? createElementTRHeight-topPx : 0}px;`);
        setRowDisableNone(topNum, showRowNum, binding);
      })
    });
  }
};