ant-design-vue树形结构控件的改造_antd tree修改节点样式

最近项目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;
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

第二个问题

ant-design-vue中的a-tree并未提供操作节点的方法，所以查找了些资料 发现可以用slot重新定义节点的结构，并添加操作方法的按钮

• 修改treeData数据 （ant-design-vue/a-tree页面API部分）
  

<a-tree
   :treeData="allBranchListGetter">
   // ....待修改
</a-tree>
...
<script>
// 这里的数据一般是后端返回的，通常不会返回scopedSlots属性，我们拿到后端的数据之后还需要进行循环遍历处理把这个属性加上
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

• 修改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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26