資訊專欄INFORMATION COLUMN
摘要：由于目前還未開發(fā)樹形表格組件，也參閱了網(wǎng)絡(luò)上部分基于表格封裝的開源樹形組件，都沒有找的太理想可進(jìn)行二次開發(fā)的開源項(xiàng)目，所以就萌生了自行開發(fā)樹形表格。
由于ElementUI目前還未開發(fā)樹形表格組件，也參閱了網(wǎng)絡(luò)上部分基于ElementUI表格封裝的開源樹形組件，都沒有找的太理想可進(jìn)行二次開發(fā)的開源項(xiàng)目，所以就萌生了自行開發(fā)樹形表格。
本示例提供開發(fā)思路，移除了多余的樣式，比較適合新手入門學(xué)習(xí)，如果應(yīng)用于實(shí)際項(xiàng)目還請(qǐng)自行封裝。
目前還僅僅實(shí)現(xiàn)了視覺的樹結(jié)構(gòu)的層級(jí)效果和控制結(jié)構(gòu)的顯示隱藏，后續(xù)還會(huì)進(jìn)行不斷的完善和優(yōu)化，有必要的話會(huì)對(duì)組件進(jìn)行二次封裝，有點(diǎn)在重復(fù)造論的感覺哈。
效果圖 完整代碼 頁(yè)面(tree-table.vue)工具方法TreeTable{{ scope.row.id }}
考慮數(shù)組轉(zhuǎn)樹和遍歷樹都是在實(shí)際項(xiàng)目中都是非常常用的，所以這邊對(duì)這兩個(gè)方法進(jìn)行了封裝。數(shù)組轉(zhuǎn)樹結(jié)構(gòu)(./utils/array.ts)
export function arrayToTree(list: object[], props = {id: "id", pid: "pid", children: "children"}) {
let tree: object[] = [];
let map: any = {};
let listLength = list.length;
for (let i = 0; i < listLength; i++) {
let node: any = list[i];
let nodeId: any = node[props.id];
map[nodeId] = node;
}
for (let i = 0; i < listLength; i++) {
let node: any = list[i];
let nodePid: any = node[props.pid];
let parentNode: any = map[nodePid];
if (parentNode) {
parentNode[props.children] = parentNode[props.children] || [];
parentNode[props.children].push(node)
} else {
tree.push(node)
}
}
return tree
}
遍歷樹結(jié)構(gòu)(./utils/tree.ts)
結(jié)合實(shí)際項(xiàng)目應(yīng)用，我們采用了先序遍歷法對(duì)樹進(jìn)行遍歷，為了方便在業(yè)務(wù)代碼里的應(yīng)用，在遍歷過程中會(huì)對(duì)每個(gè)節(jié)點(diǎn)掛載節(jié)點(diǎn)訪問路徑 _idPath 屬性和節(jié)點(diǎn)深度 _depth 屬性。
export function ergodicTree(tree: object[], callback: any = () => {}, props = {id: "id", pid: "pid", children: "children"}) {
function _ergodicTree(tree: object[], parentIdPath?: any[], depth: number = 0) {
const treeLength = tree.length;
for (let i = 0; i < treeLength; i++) {
let node: any = tree[i];
const _idPath: any[] = parentIdPath ? [...parentIdPath, node[props.id]] : [node[props.id]];
const _depth: number = depth + 1;
node._idPath = _idPath;
node._depth = _depth;
callback(node);
if (node[props.children] && node[props.children] instanceof Array) {
_ergodicTree(node[props.children], _idPath, _depth)
}
}
}
_ergodicTree(tree);
return tree;
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/103424.html
摘要：本文是譯文，原文是我在原文的基礎(chǔ)上加了百度的圖表庫(kù)，這個(gè)也是毫不遜色其他圖表庫(kù)的。更新記錄圖表類數(shù)據(jù)驅(qū)動(dòng)文檔通常被稱為最強(qiáng)大的開源可視化庫(kù)。是迄今為止最好的圖表庫(kù)。在頂級(jí)功能支持，使任何元素可拖動(dòng)，可旋轉(zhuǎn)或可滑動(dòng)滾動(dòng)和快速性能的能力。 本文是譯文，原文是https://da-14.com/blog/top-11...我在原文的基礎(chǔ)上加了百度的Echats圖表庫(kù)，這個(gè)也是毫不遜色其他圖表...
摘要：截止到目前年月日為止，開源庫(kù)中沒有找到可以支持的組件，所以在最新的版本中支持這一特性。所謂的大表格虛擬化，其實(shí)就是為表格設(shè)置一個(gè)較大的數(shù)據(jù)比如條數(shù)據(jù)，然后虛擬一個(gè)表格隱藏掉不需要顯示的數(shù)據(jù)。在組件之前的版本中，渲染的樹形表格的結(jié)構(gòu)是一棵。 背景 有這樣一個(gè)需求，一位 React Suite（以下簡(jiǎn)稱 rsuite）的用戶，他需要一個(gè) Table 組件能夠像 Jira Portfolio...
摘要：此頁(yè)面是實(shí)現(xiàn)樹表格的關(guān)健頁(yè)面。這里就是關(guān)健點(diǎn)，因?yàn)檫@個(gè)子組件是需要遞歸實(shí)現(xiàn)，所以，需要?jiǎng)討B(tài)注冊(cè)到當(dāng)前組件中。補(bǔ)充一點(diǎn)不要只看部分，部分才是這個(gè)樹表格的關(guān)健所在。 基于vue.js實(shí)現(xiàn)樹形表格的封裝（vue-tree-table） 前言 由于公司產(chǎn)品（基于vue.js）需要，要實(shí)現(xiàn)一個(gè)樹形表格的功能，百度、google找了一通，并沒有發(fā)現(xiàn)很靠譜的，也不是很靈活。所以就用vue自己擼了一個(gè)...
摘要：為什么我們需要是一個(gè)基于的套件庫(kù)，兼容。全面的國(guó)際化支持所有組件的內(nèi)置文案支持國(guó)際化，大部分文案用戶可以主動(dòng)設(shè)置。持續(xù)的功能增強(qiáng)借助社區(qū)和團(tuán)隊(duì)自身的力量，會(huì)在現(xiàn)有基礎(chǔ)上優(yōu)化使用體驗(yàn)，增強(qiáng)組件功能，添加更多常用組件來滿足不同場(chǎng)景的需求。 showImg(https://gw.alicdn.com/tps/TB1TVapKFXXXXbbXpXXXXXXXXXX-1000-500.png);...
閱讀 1625·2023-04-26 01:36
閱讀 2793·2021-10-08 10:05
閱讀 2837·2021-08-05 09:57
閱讀 1591·2019-08-30 15:52
閱讀 1253·2019-08-30 14:12
閱讀 1379·2019-08-30 11:17
閱讀 3186·2019-08-29 13:07
閱讀 2507·2019-08-29 12:35
