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中的话,获取的是上一次数据，即不能正确的渲染

更新一下,写博客总是漏一些东东

文中.tree-table是自定义的样式，主要用来区分当前表格是树形表格

.tree-tr样式控制隐藏，上文中还少一句代码

.tree-tr {
  display: none;
}

写了个demo已放到码云，地址 https://gitee.com/ybchen292/vue-demo.git

更新一波 2021-7-24

当某列设为定位时，会出现条数翻倍，原因为代码中获取tr为.el-table__body，而定位后会有2个.el-table__body，所以只需要吧.el-table__body的上下层级更精准点就行了，具体查看样式就很清楚了