輕松實現(xiàn)可擴展的樹形表格

harryhappy 發(fā)布于2019-08-23 16:52 / 1050人閱讀

摘要：由于目前還未開發(fā)樹形表格組件，也參閱了網(wǎng)絡上部分基于表格封裝的開源樹形組件，都沒有找的太理想可進行二次開發(fā)的開源項目，所以就萌生了自行開發(fā)樹形表格。

由于ElementUI目前還未開發(fā)樹形表格組件，也參閱了網(wǎng)絡上部分基于ElementUI表格封裝的開源樹形組件，都沒有找的太理想可進行二次開發(fā)的開源項目，所以就萌生了自行開發(fā)樹形表格。

本示例提供開發(fā)思路，移除了多余的樣式，比較適合新手入門學習，如果應用于實際項目還請自行封裝。

目前還僅僅實現(xiàn)了視覺的樹結構的層級效果和控制結構的顯示隱藏，后續(xù)還會進行不斷的完善和優(yōu)化，有必要的話會對組件進行二次封裝，有點在重復造論的感覺哈。

效果圖

完整代碼 頁面(tree-table.vue)

工具方法

考慮數(shù)組轉(zhuǎn)樹和遍歷樹都是在實際項目中都是非常常用的，所以這邊對這兩個方法進行了封裝。

數(shù)組轉(zhuǎn)樹結構(./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
        }

遍歷樹結構(./utils/tree.ts)

結合實際項目應用，我們采用了先序遍歷法對樹進行遍歷，為了方便在業(yè)務代碼里的應用，在遍歷過程中會對每個節(jié)點掛載節(jié)點訪問路徑 _idPath 屬性和節(jié)點深度 _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;
        }

云服務器 GPU云服務器 php實現(xiàn)表格可編輯彈性可擴展的云計算服務器計劃 php可更改的表格 html表格的可編輯

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/103424.html

12個值得關注的頂級可視化JS庫涉及圖表、動畫、時間處理，表格操作

摘要：本文是譯文，原文是我在原文的基礎上加了百度的圖表庫，這個也是毫不遜色其他圖表庫的。更新記錄圖表類數(shù)據(jù)驅(qū)動文檔通常被稱為最強大的開源可視化庫。是迄今為止最好的圖表庫。在頂級功能支持，使任何元素可拖動，可旋轉(zhuǎn)或可滑動滾動和快速性能的能力。本文是譯文，原文是https://da-14.com/blog/top-11...我在原文的基礎上加了百度的Echats圖表庫，這個也是毫不遜色其他圖表...

JinB 2019-08-20 14:14 評論0 收藏0
開源 UI 庫中，唯一同時實現(xiàn)了大表格虛擬化和樹表格的 Table 組件

摘要：截止到目前年月日為止，開源庫中沒有找到可以支持的組件，所以在最新的版本中支持這一特性。所謂的大表格虛擬化，其實就是為表格設置一個較大的數(shù)據(jù)比如條數(shù)據(jù)，然后虛擬一個表格隱藏掉不需要顯示的數(shù)據(jù)。在組件之前的版本中，渲染的樹形表格的結構是一棵。背景有這樣一個需求，一位 React Suite（以下簡稱 rsuite）的用戶，他需要一個 Table 組件能夠像 Jira Portfolio...

shenhualong 2019-08-23 14:52 評論0 收藏0
基于vue.js實現(xiàn)樹形表格的封裝

摘要：此頁面是實現(xiàn)樹表格的關健頁面。這里就是關健點，因為這個子組件是需要遞歸實現(xiàn)，所以，需要動態(tài)注冊到當前組件中。補充一點不要只看部分，部分才是這個樹表格的關健所在。基于vue.js實現(xiàn)樹形表格的封裝（vue-tree-table）前言由于公司產(chǎn)品（基于vue.js）需要，要實現(xiàn)一個樹形表格的功能，百度、google找了一通，并沒有發(fā)現(xiàn)很靠譜的，也不是很靈活。所以就用vue自己擼了一個...

yedf 2019-08-26 12:09 評論0 收藏0
UXCore：一個兼容主流瀏覽器的 React PC 組件庫

摘要：為什么我們需要是一個基于的套件庫，兼容。全面的國際化支持所有組件的內(nèi)置文案支持國際化，大部分文案用戶可以主動設置。持續(xù)的功能增強借助社區(qū)和團隊自身的力量，會在現(xiàn)有基礎上優(yōu)化使用體驗，增強組件功能，添加更多常用組件來滿足不同場景的需求。 showImg(https://gw.alicdn.com/tps/TB1TVapKFXXXXbbXpXXXXXXXXXX-1000-500.png);...

Big_fat_cat 2019-08-19 18:38 評論0 收藏0