美文网首页
vue+Element实现tree树形数据展示

vue+Element实现tree树形数据展示

作者: 森森deHOME | 来源:发表于2020-07-10 11:49 被阅读0次

    简单粗暴是我的原则,方便复制粘贴是我的梦想!!!
    效果如下


    微信截图_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) {//判断是否为儿子节点
                            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) {//有儿子节点则递归
                    this.data2treeDG(datas, childrenArray)
                }
            }
            this.setTree = dataArray;
            return dataArray;
        },
       },
            created() {
                var _this = this;
                // 这边是请求数据的
                root().then(data => {
                    _this.setTree = data
                    _this.getListData()
                      // this.$router.push({ path: '/table' });
                });
     
            }
        }
    </script>
    <style lang="scss" scoped>
     
    </style>
     
    

    相关文章

      网友评论

          本文标题:vue+Element实现tree树形数据展示

          本文链接:https://www.haomeiwen.com/subject/zpnpcktx.html