树形控件el-tree

一、:props="方法"——告别死数据

<el-tree :data="data" :props="defaultProps"></el-tree>
<script>
  export default {
    data() {
      return {
         data:[]
    },
    methods: {
   
    }
  };
</script>

1、向服务器获取动态数据，一般结构为一个包含若干个对象的数组，如：

[

a:1,

b:2,

c:3,

d:[{

          a:1,

          b:2,

          c:3,

         d:[{

                  ......

            }]

}]

]

2、而我们要显示在页面上只有同级众多数据中的一个，那么怎么判断我们要显示的内容呢？

:props可以帮我们判断，那个key值要显示的内特——label，哪个key值对应的是往下遍历的children。

树形控件中放入props这个API，前面再加冒号，动态绑定一个属性：

:props="defaultProps"

再在model，也就是script标签下写入：

data(){

return

{

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

//这样d就是children，a就是显示子啊页面的label

}} 

二、 :render-content自定义树节点内容

        

  renderContent(h, { node, data, store }) {
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
            <span>
              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
            </span>
          </span>);
      }