效果圖
如果你剛好需求中需要如上效果那么只需要吧代碼復制過去直接用即可,注意寫在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;
}