ant-design-vue树形结构控件的改造

最近项目PRD需求如下

有一个树形结构的菜单管理，与官网ant-design-vue中提供的a-tree不同

1. 图标不同
2. 每条数据hover的时候都有操作按钮

解决方案

第一个问题

这是不修改a-tree的任何样式文件时出现的icon图标，与项目项目要求不符

若要改成项目PRD要求的那样只需改动一些样式即可

/deep/ .ant-tree li span.ant-tree-switcher{
   
  width:16px;
  height:16px;
  margin:4px;
  // 修改树结构合起的icon
  &.ant-tree-switcher_close{
   
    background:url('//assets.2dfire.com/frontend/b415e20fc703838e5a028437366ff22a.png') no-repeat;
    background-size:contain;
    i{
   
      display: none;
    }
  }
  // 修改树结构展开的icon
  &.ant-tree-switcher_open{
   
    background:url('//assets.2dfire.com/frontend/568ca02f82eee05829d276881363c22a.png') no-repeat;
    background-size:contain;
    i{
   
      display: none;
    }
  }
}

第二个问题

ant-design-vue中的a-tree并未提供操作节点的方法