ant-design中树形菜单tree中加入新增编辑删除按钮

<a-tree :tree-data="treeData" default-expand-all show-icon :default-selected-keys="['0-0-0']">
    <a-icon slot="apartment" type="apartment" style="color:#1890ff" />
    <a-icon slot="file-text" type="file-text" />
    <template slot="custom" slot-scope="item">
      <span>{{ item.title }}</span>
      <span class="but_operation">
        <span class="but_type" @click="()=> append(item)">编辑</span>
        <span class="but_type" style="right:120px;" @click="()=> edit(item)">删除</span>
        <span class="but_type" @click="(e)=> remove(item)">新建</span>
      </span>
    </template>
  </a-tree>

// 树形菜单数据
      treeData: [
        {
          title: '全部',
          key: '0-0',
          slots: { icon: 'apartment' },
          children: [
            {
              title: '德风石化有限公司',
              key: '0-0-0',
              slots: { icon: 'apartment' },
              children: [
                {
                  title: '公共工程',
                  key: '0-0-0-0',
                  slots: { icon: 'apartment' },
                  children: [
                    {
                      title: '中心控制室',
                      key: '0-0-0-0-0',
                      scopedSlots: { icon: 'file-text', title: 'custom' }
                    },
                    { title: '辅料管区', key: '0-0-0-0-1', scopedSlots: { icon: 'file-text', title: 'custom' } },
                    { title: 'PSA伐区', key: '0-0-0-0-2', scopedSlots: { icon: 'file-text', title: 'custom' } },
                    { title: '导热油房区', key: '0-0-0-0-3', scopedSlots: { icon: 'file-text', title: 'custom' } },
                    { title: '甲醇裂解区', key: '0-0-0-0-4', scopedSlots: { icon: 'file-text', title: 'custom' } },
                    { title: '机柜间', key: '0-0-0-0-5', scopedSlots: { icon: 'file-text', title: 'custom' } }
                  ]
                },
                { title: '污水处理站', key: '0-0-0-1', scopedSlots: { icon: 'apartment' } }
              ]
            }
            // { title: 'leaf', key: '0-0-1', scopedSlots: { icon: 'apartment' } }
          ]
        }
      ],

.but_type {
  color: #1890ff;
  cursor: pointer;
  padding-left: 5px;
  padding-right: 5px;
}
/*修改全局a-tree样式*/
/*全局修改a-tree样式——开始*/
.ant-tree {
  position: relative;
}
.ant-tree > li span.ant-tree-node-content-wrapper::before, 
.ant-tree .ant-tree-child-tree > li span.ant-tree-node-content-wrapper::before{
  position: absolute;
    right: 0;
    left: 0;
    height: 24px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    content: '';
}
.ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected::before{
  background: rgba(173, 224, 251, 0.4);
}
.ant-tree li .ant-tree-node-content-wrapper:hover {
  background-color: transparent;
  color: #000;
}
.ant-tree li .ant-tree-node-content-wrapper:hover .but_operation {
  opacity: 1;
 }
.ant-tree li .ant-tree-node-content-wrapper:hover.ant-tree-node-content-wrapper-normal::before,
.ant-tree li .ant-tree-node-content-wrapper:hover.ant-tree-node-content-wrapper::before{
  background: rgba(173, 224, 251, 0.4);
  color: #000;
}
.ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected{
  background: transparent;
}
.ant-tree > li span.ant-tree-node-content-wrapper.ant-tree-node-selected {
  color: #000;
  background: transparent;
}

.ant-tree li span.ant-tree-switcher {

  z-index: 1;

}

/*全局修改a-tree样式——结束*/