el-tree的props怎么用

Question

正常的data结构

data: [
    {
      label: '一级 1',
      children: []
    }, 
    {
      label: '一级 2',
      children: []
    }, 
    {
      label: '一级 3',
      children: [
          {
            label: '二级 3-1',
            children: [
                {
                  label: '三级 3-1-1'
                }
            ]
          }
      ]
    }
],

<el-tree 
    :data="data" 
    :props="defaultProps" 
></el-tree>

defaultProps: {
  children: 'children',
  label: 'label'
}

我的data结构

mydata: [
    name:'啦啦啦',
    __config__:{
        label: '一级 0',
        children:[
            {
               name:'啊啊啊',
               __config__:{
                  label: '一级 1',
                  children: []
               }
            }, 
            {
               name:'呸呸呸',
               __config__:{
                  label: '一级 2',
                  children: []
               }
            }, 
            {
                name:'呱呱呱',
                __config__:{
                    label: '一级 3',
                    children: [
                        { 
                            name:'噢噢噢',
                            __config__:{
                                label: '二级 3-1',
                                children: [{
                                    label: '三级 3-1-1'
                                }]
                            }
                        }
                    ]
                }              
            }
        ]
    }    
],

其实就是多了一层__config__，我不想改变我的数据结构，于是用props

<el-tree
  :data="[mydata.__config__]"
  :props="layoutTreeProps"
>

layoutTreeProps: {
    label(data, node) {
      const config = data.__config__ || data
      return config.Name || config.label
    },
    children(data, node) {
      return data.children || data.__config__.children
    }
  }

这样倒是能把树渲染出来，可是会报错，

请问：
1、在不改变我的数据结构的情况下，怎么把tree渲染出来并且不报错呢？
2、为啥会出现上面的报错，怎么解决呢？

Answer 1

你用的版本几，版本2之后children就不支持函数格式了，只支持string

Answer 2

源码和文档里都是不支持函数的。

因为你指定 children 是个函数，所以 node.data.${childrenKey} 就拼接成了那个报错信息里 "" 包裹的一大串。

Vue 源码中 Watcher 相关的部分：

根据提示可能需要改成：

this.$watch(function() {
    return 'XXXXX';
}, () => {
    this.node.updateChildren();
});

当然这不可行。

如果你实在不想改变你现有的结构，想到这么个办法：

data() {
    mydata: this.getData(),
}

methods: {
    createNode(name, label, children) {
        const node = { name, __config__: { label, children } };
        
        Object.defineProperties(node, {
            label: {
                get() {
                    return this.__config__.label;
                }
            },
            children: {
                get() {
                    return this.__config__.children;
                }
            }
        });
        
        return node;
    },

    getData() {
        return [
            this.createNode(
                '啦啦啦',
                '一级 0',
                [
                    this.createNode(
                        '啊啊啊',
                        '一级 1'
                    ),
                    this.createNode(
                        '啊啊啊',
                        '一级 2'
                    ),
                    this.createNode(
                        '啊啊啊',
                        '一级 3',
                        [
                            this.createNode(
                                '噢噢噢',
                                '二级 3-1',
                                [
                                    this.createNode(
                                        '嘿嘿嘿',
                                        '三级 3-1-1'
                                    )
                                ]
                            )
                        ]
                    )
                ]
            )
        ];
    }
}

// template
<el-tree :data="mydata"></el-tree>

Answer 3

稍微改写了下，具体见代码：

// template
<el-tree :data="[formatData.__config__]" :props="layoutTreeProps" />

// data
data(){
   return {
      mydata: { // 你的data结构（此处你贴的数组结构，根据el-tree的data绑定应该是对象的）
         name:'啦啦啦',
         __config__:{ ...... }
      }，
      layoutTreeProps: {
         label(data, node) {
            const config = data.__config__ || data
            return config.Name || config.label
         },
         children: 'children'
      }
   } 
},
computed: {
    formatData() {
        return this.getTreeDate(this.mydata)
    }
},
methods: {
    getTreeDate(data) {
        let d = data.__config__
        if(d && d.children.length > 0) {
            d.children.map(item => {
                this.getTreeDate(item)
                if(item.__config__ && item.__config__.children.length > 0) {
                    item.children = item.__config__.children
                }
                item.children =  item.children || []
                return item
            })
        }
        return Object.assign({}, data)
    }
}

最后结果