tree

效果图:

image.png

重点:这里如果要给tree新加属性，比如我这个是加了name属性，那么我需要用到插槽，需要添加template标签中添加slot="custom" slot-scope="item"，在treeData的数据中需要加scopedSlots:{title:"custom"}。这里文档写的必须scopedSlots中对象的属性名必须是title。然后template标签中slot的就是title 定义的title:"custom"

<template>
  <div>
    你好
    
    <a-tree
      v-model="checkedKeys"
      checkable
      :expanded-keys="expandedKeys"
      :auto-expand-parent="autoExpandParent"
      :selected-keys="selectedKeys"
      :tree-data="treeData"
      @expand="onExpand"
      @select="onSelect"
    >
    <template slot="custom"  slot-scope="item">
      <div >
        <span >{{item.title}}</span>
        <span class="span2" >{{item.name}}</span>
      </div>
    </template>
    </a-tree>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: ["0-0-0"],
      selectedKeys: [],
      treeData: [
        {
          title: "0-0",
          key: "0-0",
          name:'第一级-1',
          scopedSlots: {
            title: "custom",
          },
          children: [
            {
              title: "0-0-0",
              key: "0-0-0",
              name:'第一级-2',
              scopedSlots: {
                title: "custom",
              },
            },
           
          ],
        },
        
      ],
    };
  },
  watch: {
    checkedKeys(val) {
      console.log("onCheck", val);
    },
  },
  props: {
    msg: String,
  },
  methods: {
    onExpand(expandedKeys) {
      console.log("onExpand", expandedKeys);
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onCheck(checkedKeys) {
      console.log("onCheck", checkedKeys);
      this.checkedKeys = checkedKeys;
    },
    onSelect(selectedKeys) {
      console.log("onSelect", selectedKeys);
      this.selectedKeys = selectedKeys;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.span2{
  display: inline-block;
  margin-left: 10px;
}
</style>