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并未提供操作节点的方法,所以查找了些资料 发现可以用slot重新定义节点的结构,并添加操作方法的按钮

<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>
  • 修改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>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论 4

打赏作者

ygman

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值