vue2+element-plus tree树形控件添加、删除、编辑

环境：vue2+element-plus
需求：tree树形控件添加、删除、编辑
描述：tree树形控件自带添加、删除，却没有编辑功能，应该怎样如何实现呢？
代码：

template 

<div id="index" >
  <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          :render-content="renderContent">
  </el-tree>
</div>

script
--data数据--append()--remove()--renderContent()(其实都是element直接扒下来的，哈哈)
编辑功能请看代码 edit()

<script>

  let id = 1000;

  export default {
    name: 'index',
    data() {
      const data = [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }];
      return {
        data: JSON.parse(JSON.stringify(data)),
      }
    },
    methods:{
        
        //添加()
        append(data) {
          const newChild = { id: id++, label: 'testtest', children: [] };
          if (!data.children) {
            data.children = []
          }
          data.children.push(newChild);
          this.data = [...this.data]
        },

        //删除
        remove(node, data) {
          const parent = node.parent;
          const children = parent.data.children || parent.data;
          const index = children.findIndex(d => d.id === data.id);
          children.splice(index, 1);
          this.data = [...this.data]
        },

        //编辑(data.label="赋值")
        edit(data){
          this.$prompt('', '请输入标题', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(({ value }) => {
            if(value!=null){
              data.label=value
            }
          }).catch(() => {
          });
        },

        renderContent(h, { node, data, store }) {
          return h("span", {class: "custom-tree-node"},
              h("span", null, node.label),
              h("span", null,
                  h("a", {
                      onClick: () => this.append(data)
                  }, " 添加 "),
                  h("a", {
                      onClick: () => this.remove(node, data, store)
                  }, " 删除 "),
                  h("a", { 
                      onClick: () => this.edit(data)
                  }, ' 编辑 '),
              )
          );
        }
    }
  }
</script>

此时tree树形控件添加、删除、编辑功能都已实现
--------------------------------------------------------------------------------------

附加美化功能：

对应编辑、添加，编辑

renderContent(h, { node, data, store }) {
    return h("div", {class: "list"},
        h("span", {class: "title"},
            h("a", {
                onClick: () => this.onTitle(data)
            }, node.data.titleName),
        ),
        h("span", {class: "edit"},
            h("a", {
                onClick: () => this.edit(data)
            }, <i class="el-icon-edit"></i>),
            h("a", {
                onClick: () => this.append(data)
            }, <i class="el-icon-plus"></i>),
            h("a", {
                onClick: () => this.remove(node, data, store)
            }, <i class="el-icon-minus"></i>),

        )
    );
}

还有箭头等美化，属于css前端，可百度搜索...