Vue樹形數據處理(js)

DesGemini 發布于2019-08-26 10:45 / 1007人閱讀

摘要：當前需求層級列表中選中某個元素則獲取最底層子集并用逗號連接數據形式遍歷方法可參考，寫的很詳細具體操作首先找到選擇元素的在樹形數據中的位置，并獲取他找尋相同的的元素找尋他的最底層子元素，也就是所有沒有子集的元素找當前的子元素的

當前需求:層級列表中選中某個元素,則獲取最底層子集id,并用逗號連接(1,2,3,4,5);

數據形式:

let data = [{
            id:"1",
            children:[{
                id:"11",
                children:[{
                    id:"111",
                    children:null
                },
                {
                    id:"112",
                    children:null
                },
                {
                    id:"113",
                    children:null
                }]
            },
            {
                id:"12",
                children:[{
                    id:"121",
                    children:null
                },
                {
                    id:"122",
                    children:null
                },
                {
                    id:"123",
                    children:null
                }]
            }]

        }];

遍歷方法可參考:https://blog.csdn.net/chaos_h...，寫的很詳細
具體操作：首先找到選擇元素的id在樹形數據中的位置，并獲取他

找尋id相同的的元素

findSameId(tree, id) {
            let isGet = false;
            let retNode = null;
            function deepSearch(tree, id) {
                for (var i = 0; i < tree.length; i++) {
                    if (tree[i].children && tree[i].children.length > 0) {
                        deepSearch(tree[i].children, id);
                    }
                    if (id === tree[i].id || isGet) {
                        isGet || (retNode = tree[i]);
                        isGet = true;
                        break;
                    }
                }
            }
            deepSearch(tree, id);
            return retNode;
        };

找尋他的最底層子元素，也就是所有沒有子集的元素

找當前id的子元素的id

findChildId(data) {
            console.log(data, 678);
            console.log(data.children, 678);

            if (data.children !== null) {
                for (let i = 0; i < data.children.length; i++) {
                    console.log(data.children[i], i);
                    const childrens = data.children[i];

                    if (childrens.hasOwnProperty("children") && childrens.children && childrens.children.length !== 0) {
                        console.log("-------");

                        console.log(childrens, i);
                        console.log("-------");

                        this.findChildId(childrens);
                    } else {
                        this.sideIds.push(childrens.id);
                    }
                   
                }
            } else {
                this.sideIds.push(data.id);
            }
        }

### 由于本身是vue下的處理 handleSelectDept是觸發點擊獲取到對應id; this.sideIds是本身在data里里定義了的

data(){
            return{
                sideIds:[]
            }
        }

觸發效果

handleSelectDept(key) {
            this.sideIds = [];//每次點擊需要把本身的sideIds清空
            const dataId = this.findSameId(this.treeData, key);
            this.findChildId(dataId);
            console.log(this.sideIds, 9999)
            this.$set(this.queryForm, "depIds", this.sideIds.join(","));
            console.log(this.queryForm, 989);
            this.getTableData();
        }

GPU云服務器云服務器 js 樹形菜單數據 js 樹形數據遍歷 js+加樹形數據 js 加樹形數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106719.html

基于vue.js實現樹形表格的封裝

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

yedf 2019-08-26 12:09 評論0 收藏0
vue-orgchart: 可編輯，可導出 JSON 的樹形組織圖

摘要：調研最近公司有個需求，做一個可編輯的樹形組織圖。前言首先感謝的如果你想用的封裝，可以直接用我的項目功能格式導入導出樹形關系圖支持樹形關系圖導出圖片可拖拉樹形關系圖可編輯樹形關系圖預覽項目地址文檔地址調研最近公司有個需求，做一個可編輯的樹形組織圖。我第一個想到的是ECharts，可當時并沒有（最近一個版本出了樹圖也不是組織圖）；然后想到了AntV G6（上手難度有點大也不是組織圖）；...

lidashuang 2019-08-22 11:15 評論0 收藏0
vue樹形菜單

摘要：樹形菜單由于項目原因，沒有使用框架上的樹形菜單，所以自己動手并參考大佬的代碼寫了一個樹形菜單的組件，話不多說，直接上代碼。 vue樹形菜單由于項目原因，沒有使用ui框架上的樹形菜單，所以自己動手并參考大佬的代碼寫了一個樹形菜單的組件，話不多說，直接上代碼。html代碼showImg(https://segmentfault.com/img/bV5Bq4?w=1015&h=269);j...

BlackHole1 2019-08-22 15:21 評論0 收藏0
vue樹形菜單

摘要：樹形菜單由于項目原因，沒有使用框架上的樹形菜單，所以自己動手并參考大佬的代碼寫了一個樹形菜單的組件，話不多說，直接上代碼。 vue樹形菜單由于項目原因，沒有使用ui框架上的樹形菜單，所以自己動手并參考大佬的代碼寫了一個樹形菜單的組件，話不多說，直接上代碼。html代碼showImg(https://segmentfault.com/img/bV5Bq4?w=1015&h=269);j...

phoenixsky 2019-08-01 18:41 評論0 收藏0
vue+element tree(樹形控件數據格式)組件(1)

摘要：樹形控件數據格式組件最近做了第一個組內可以使用的組件，雖然是最簡版，也廢了不少力。讓我來記錄這個樹形組件的編寫過程和期間用到的知識點。 vue+element tree(樹形控件數據格式)組件(1), 最近做了第一個組內可以使用的組件，雖然是最簡版，也廢了不少力。各位前輩幫我解決問題，才勉強搞定。讓我來記錄這個樹形組件的編寫過程和期間用到的知識點。首先說說需求，就是點擊出現彈窗+蒙板...

Pines_Cheng 2019-08-02 16:05 評論0 收藏0