vue中tree的使用二(节点的增删改)

        项目中往往需要使用tree来对一些数据进行操作。比如对对一个资源树的节点进行增删改的操作，下面就简单介绍一下如何实现，使用的是ant-desigin中的a-tree:

        1.在html中定义tree并定义对应的操作的slot按钮：

    <a-tree
          showLine
          showIcon
          :default-expanded-keys="expandedKeys"
          :treeData="treeData"
>
        >
            <template slot="rootAdd" slot-scope="{ key}">
                <a-button  size="small" icon="plus" title="增加子节点" @click="toAdd(key)" /> 
           </template>
         
           <template slot="custom" slot-scope="{ key }">
            <a-button  size="small" icon="plus" title="增加子节点" @click="toAdd(key)" /> 
            <a-button size="small" icon="edit" title="修改" @click="toEdit(key)" />
            <a-button size="small" icon="delete" title="删除" @click="toDelete(key)" /> 
          </template>
        </a-tree>

        其中由于跟节点无法修改和删除，故有一个单独的跟节点的操作rootAdd；其他的子节点可以进行增删改的操作，使用custom；

       2. 具体的数据源treeData的定义如下：

// 根节点的定义
let rootData ={
          title: '所有分类',
          key: '0',
          scopedSlots: { icon: 'rootAdd' }
 }
// 子节点的定义
newNode.key=xx
newNode.title=xx
newNode.scopedSlots= { icon: 'custom' }

       3. 最后处理增删改的事件并处理treeData数据即可实现功能。