a-tree

  1. 树的编辑和删除(插槽实现)

<a-tree>标签中加上插槽,插槽中的内容包括树节点原本要展示的内容以及自定义的内容。

给treeData数据的每个层级加上'scopedSlots', { title: 'custom' }即可。

<a-tree
            v-if="treeData.length>0"
            :defaultExpandAll="true"
            :selected-keys="selectedKeys"
            :tree-data="treeData"
            :replaceFields="{children:'children', title:'categoryName', key:'id',value:'id' }"
            @expand="onExpand"
            @select="onSelect"
          >
            //插槽
            <template slot="custom" slot-scope="item">
              <div
                @mouseenter="mouseenter(item)"
                @mouseleave="mouseleave(item)"
                style="display:flex;justify-content:space-between;align-items:center;width:100%"
              >
                <span :title="item.categoryName" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ item.categoryName }}</span>
                <span
                  v-if="currentId==item.id"
                  style="display:flex;justify-content:space-between;align-items:center;"
                  v-has="'admin:true'"
                >
                  <a-tooltip placement="top">
                    <template #title>
                      <span>编辑</span>
                    </template>
                    <div style="margin-right:5px">
                      <a-icon
                        type="edit"
                        @click.stop="handleEdit(item)"
                        :style="{ fontSize: '15px' }"
                      />
                    </div>
                  </a-tooltip>
                  <a-tooltip placement="top">
                    <template #title>
                      <span>删除</span>
                    </template>
                    <div>
                      <a-icon
                        type="delete"
                        @click.stop="handleDelete(item)"
                        :style="{ fontSize: '15px' }"
                      />
                    </div>
                  </a-tooltip>
                </span>
              </div>
            </template>
          </a-tree>
//处理数据
addAttrToTree(jsonData) {
      for (let i = 0; i < jsonData.length; i++) {
        this.$set(jsonData[i], 'scopedSlots', { title: 'custom' })
        if (jsonData[i].hasOwnProperty('children')) {
          this.addAttrToTree(jsonData[i].children)
        }
      }
      return jsonData
    },

鼠标悬浮显示编辑和删除图标:通过鼠标移入和移除事件,鼠标移入时,拿到当前节点的id,移除时id置为空。在插槽中判断currentId与该节点的值是否相等,相等则v-if显示。

mouseenter(item) {
      this.currentId = item.id
    },
mouseleave(item) {
      this.currentId = ''
    },
  1. 树节点内容超出用...显示

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  1. 鼠标悬浮在节点上,显示节点完整内容

给span标签加上title属性即可。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值