elementui树形表格分页

效果图

如果你刚好需求中需要如上效果那么只需要吧代码复制过去直接用即可,注意写在nextTick中

前提是vue加elementui

代码如下

/**
   *  树形表格分页
   * @param {Object} page 分页参数值
   */
  treePaging(page) {
    let start = (Number(page.num) - 1) * Number(page.size);
    let end = Number(page.size) * Number(page.num);
    let trList = document.querySelectorAll(".tree-table .el-table__body tr");
    let trTree = document.querySelectorAll(
      ".tree-table .el-table__body .tree-tr"
    );
    //清空上次添加的class
    trTree.forEach((value) => {
      value.className = value.className.replace("tree-tr", "");
    });
    //记录总共显示了多少行
    let num = 0;
    trList.forEach((value) => {
      if (value.style.display != "none") {
        ++num;
        if (num <= start || num > end) {
          value.className += " tree-tr";
        }
      }
    });
    return num;
  },

返回值为总条数

分析

浏览器中f12可得elementui树形表格原本的折叠与展开其实是借助了display:none这个属性，所以我们同样借助display来实现效果

以上代码需放在nextTikt中，因为我们需要dom渲染完之后获取最新的display多少行，未放在nextTick中的话,获取的是上一次数据，即不能正确的渲染