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;
  &.ant-tree-switcher_close{
    background:url('//assets.2dfire.com/frontend/b415e20fc703838e5a028437366ff22a.png') no-repeat;
    background-size:contain;
    i{
      display: none;
    }
  }
  &.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並未提供操作節點的方法，所以查找了些資料 發現可以用slot重新定義節點的結構，並添加操作方法的按鈕

• 修改treeData數據 （ant-design-vue/a-tree頁面API部分）
  

<a-tree
   :treeData="allBranchListGetter">
   // ....待修改
</a-tree>
...
<script>
const allBranchListGetter = [
    {
        "key":"99230713",
        "title":"萬科集團",
        // ⚠️重點這這裏⚠️每一條數據上都添加scopedSlots屬性
        "scopedSlots":{
            "title":"custom"
        },
        "children":[
            {
                "key":"99230992",
                "title":"華東區域",
                "scopedSlots":{
                    "title":"custom"
                },
                "children":[
                    {
                        "key":"99230112",
                        "title":"杭州萬科",
                        "scopedSlots":{
                            "title":"custom"
                        },
                        "children":[],
                    }
                ],
            },
            {
                "key":"99230993",
                "title":"華南區域",
                "scopedSlots":{
                    "title":"custom"
                },
                "children":[],
            },
            {
                "key":"99231020",
                "title":"華北區域",
                "scopedSlots":{
                    "title":"custom"
                },
                "children":[],
            }
        ],
    }
]
</script>

• 修改view

<a-tree
  :treeData="allBranchListGetter">
  // ⚠️重點這這裏⚠️
  <template slot="custom" slot-scope="item">
    <div class="tree-view-item">
      <span class="tree-view-left">{{ item.title }}</span>
      <div class="tree-view-right">
        <button class="tree-view-operation" @click.stop="onHandleEditBranchOffice(item)">
          <img
            src="//assets.2dfire.com/frontend/a7a2aed48cbeac93209d8cf12abb7120.png"
            alt="編輯"
          />
        </button>
        <button
          class="tree-view-operation"
          @click.stop="onHandleDeleteBranchOffice(item.key)"
        >
          <img
            src="//assets.2dfire.com/frontend/ddb26080b4607970693a064ceef5a672.png"
            alt="刪除"
          />
        </button>
      </div>
    </div>
  </template>
</a-tree>