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

 简单粗暴是我的原则，方便复制粘贴是我的梦想！！！

效果如下：

<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>

号外号外！！！！！动态赋值了

   var roleName = res.roleName.split(',')  // 后台读取到的
   this.$refs.tree.setCheckedKeys(roleName);  //这一步是最重要的