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中的話,獲取的是上一次數據，即不能正確的渲染