vue+Element實(shí)現(xiàn)tree樹形數(shù)據(jù)展示

簡單粗暴是我的原則,方便復(fù)制粘貼是我的夢想?。?!
效果如下


微信截圖_20200710114604.png
<template>
    <div class="custom-tree-container">
        <el-tree :data="setTree" show-checkbox node-key="menuId" ref="tree" highlight-current :props="defaultProps">
        </el-tree>
    </div>
</template>
 
<script>
    import { root } from '../../api/api';
    export default {
       data() {
            return {
                setTree:[],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
            }
        },
        methods: {
               getListData() {
                let dataArray = [];
                this.setTree.forEach(function (data) {
                       let parentId = data.parentId;
                        if (parentId == null) {
                            let objTemp = {
                                id: data.id,
                                name: data.name,
                                /*order: data.order,*/
                                parentId: parentId,
                            }
                            dataArray.push(objTemp);
                        }
                 })
              this.data2treeDG(this.setTree, dataArray)
          },
               data2treeDG(datas, dataArray) {
        for (let j = 0; j < dataArray.length; j++) {
            let dataArrayIndex = dataArray[j];
            let childrenArray = [];
            let Id = dataArrayIndex.id;
            for (let i = 0; i < datas.length; i++) {
                let data = datas[i];
 
 
                    let parentId = data.parentId;
                    if (parentId == Id) {//判斷是否為兒子節(jié)點(diǎn)
                        let objTemp = {
                            id: data.id,
                            name: data.name,
                           /* order: data.order,*/
                            parentId: parentId,
                        }
                        childrenArray.push(objTemp);
                    }
 
            }
             dataArrayIndex.children = childrenArray;
            console.log(666)
            console.log(dataArrayIndex.children)
            if (childrenArray.length > 0) {//有兒子節(jié)點(diǎn)則遞歸
                this.data2treeDG(datas, childrenArray)
            }
        }
        this.setTree = dataArray;
        return dataArray;
    },
   },
        created() {
            var _this = this;
            // 這邊是請求數(shù)據(jù)的
            root().then(data => {
                _this.setTree = data
                _this.getListData()
                  // this.$router.push({ path: '/table' });
            });
 
        }
    }
</script>
<style lang="scss" scoped>
 
</style>
 
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容