【vue】ant-design-vue的树结构实现节点增删改查

news2024/9/22 7:32:38

根据业务需要,实现树结构的节点新增编辑删除功能,主要逻辑是利用树节点的scopedSlots属性对其进行自定义改造,监听悬停事件在节点右侧出现增删改对应图标,点击图标出现弹窗表单对内容进行修改,具体代码如下:

// 模板部分
<template>
  <a-tree
     v-if="factorTreeData.length > 0"
     show-icon
     default-expand-parent
     :tree-data="factorTreeData"
     :defaultExpandAll="true"
     :autoExpandParent="true"
     :default-selected-keys="selectedKeys"
     @select="onTreeSelect">
     <template slot="custom" slot-scope="item">
       <div @mouseenter="onMouseEnter(item)" style="position: relative;">
         <span class="treeMode">
           <a-icon v-if="!item.isLeaf" :type="item.expanded ? 'folder-open' : 'folder'" />
           <a-icon type="file" v-if="item.isLeaf"/>
           <span style="margin-left: 5px">
             {{ item.title }}
           </span>
         </span>
         <a-space
           @click.stop
           v-if="mouseItemId === item.key"
           style="position: absolute; right: 5px; top: 0"
         >
           <a-button type="primary" size="small" icon="plus" @click="addTreeNode(item)" />
           <a-button type="primary" size="small" icon="edit" @click="editTreeNode(item)" />
           <a-button type="primary" size="small" icon="delete" @click="delTreeNode(item)" />
         </a-space>
       </div>
     </template>
   </a-tree>
    <a-modal
        v-drag-modal
         v-model="visible"
         :title="modalTitle"
         :destroyOnClose="true"
         @ok="handleSave"
         :width="800"
         :bodyStyle="{'height': '480px', 'overflow-y': 'auto'}"
         centered
       >
         <ItemModal ref="childModal" :formObj="formObj"/>
    </a-modal>
</template>

//js部分
<script>
	export default {
	 components: {
      ItemModal: () => import ('./item-modal') // 表单弹窗
     },
	 data () {
      	return {
      		// 树结构
	        factorTreeData: [],
	        expandedKeys: [],
	        selectedKeys: [],
	        mouseItemId: '',
	         // 弹窗
       		modalTitle: '',
            visible: false,
	        formObj: {}
      	}
      },
      mounted () {
      	this.getTreeData()
      },
      methods: {
        // 获取树(模拟数据)
       getTreeData () {
        this.factorTreeData= [
	        {
			    title: '0-0',
			    key: '0-0',
			    children: [
			      {
			        title: '0-0-0',
			        key: '0-0-0',
			        children: [
			          { title: '0-0-0-0', key: '0-0-0-0' },
			          { title: '0-0-0-1', key: '0-0-0-1' },
			          { title: '0-0-0-2', key: '0-0-0-2' },
			        ],
			      },
			      {
			        title: '0-0-1',
			        key: '0-0-1',
			        children: [
			          { title: '0-0-1-0', key: '0-0-1-0' },
			          { title: '0-0-1-1', key: '0-0-1-1' },
			          { title: '0-0-1-2', key: '0-0-1-2' },
			        ],
			      },
			    ],
			  }
		  ]
		  this.dealTreeData(this.factorTreeData || [])
		  this.selectedKeys = [this.factorTreeData.children[0].key]
          this.mouseItemId = this.factorTreeData.children[0].key
	    },
      	// 给每个节点添加自定义属性
      	dealTreeData (dataArr) {
         dataArr.forEach((el, i) => {
          el.value = el.key 
          if (el.children && el.children.length > 0) {
            el.isLeaf = false
            el.selectable = false
            el['scopedSlots'] = { title: 'custom' } 
            this.dealTreeData(el.children)
          } else {
            el.isLeaf = true
            el['scopedSlots'] = { title: 'custom' }
          }
        })
      },
      // 节点选择事件
      onTreeSelect (selectedKeys) {
      },
	  // 树鼠标悬停事件
      onMouseEnter (item) {
        this.mouseItemId = item.key
      },
      // 添加树节点
      addTreeNode (item) {
        this.formObj = {
          id: null,
          pid: item.parentId,
          name: '',
          displayOrder: '',
          status: '',
          remark: ''
        }
        this.modalTitle = '新增'
        this.visible = true
      },
      // 编辑树节点
      editTreeNode (item) {
        getTreeInfo({ id: item.id }).then(res => {
          if (res.code === 200) {
            this.formObj = {
              id: res.result[0].id,
              pid: res.result[0].pid,
              name: res.result[0].name,
              displayOrder: res.result[0].displayOrder,
              status: res.result[0].status,
              remark: res.result[0].remark
            }
            this.modalTitle = '编辑'
            this.visible = true
          }
        }).catch(err => console.log(err))
      },
      // 保存树节点
      handleSave() {},
      // 删除树节点
      delTreeNode (item) {
        const that = this
        this.$confirm({
          title: '确定要删除吗?',
          onOk () {
            delTree({ ids: item.id }).then(res => {
              if (res.code === 200) {
                that.$message.success('删除成功!')
                that.getTree() // 重新请求树数据
              } else {
                that.$message.error('删除失败!')
              }
            }).catch(err => {
              console.log(err)
              this.$message.error('删除失败!')
            })
          }
        })
      }
	}
</script>
 <style lang="less" scoped>
 // 树
    ::v-deep .ant-tree {
      li {
        padding: 1px 0;
      }

      .ant-tree-node-content-wrapper {
        width: calc(100% - 24px);
        height: 32px;
        line-height: 32px;
      }
      .treeMode {
        height: 30px;
        width: 70%;
        display: flex;
        align-items: center;
        span {
          height: 30px;
          display: inline-block;
          max-width: 80%;
          overflow: hidden;
          text-overflow: ellipsis;
          padding-right: 5px;
        }
      }
    }
    ::v-deep .ant-tree.ant-tree-directory > li span.ant-tree-node-content-wrapper::before {
      height: 32px;
    }
 </style>

示例:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1237916.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

TikTok Shop订单狂涨,黑五全托管品类日卖爆了

01 黑五品类日爆单 显然&#xff0c;TikTok Shop在美国的首个黑五大促收获了胜利的果实。 根据最新发布的数据&#xff0c;TikTok Shop全托管黑五六大品类日支付GMV&#xff08;总交易额&#xff09;和支付量双双实现大幅度增长。举其中几个具体数据来看&#xff0c;女装童鞋…

【腾讯云云上实验室-向量数据库】腾讯云开创新时代,发布全新向量数据库Tencent Cloud VectorDB

前言 随着人工智能、数据挖掘等技术的飞速发展&#xff0c;海量数据的存储和分析越来越成为重要的研究方向。在海量数据中找到具有相似性或相关性的数据对于实现精准推荐、搜索等应用至关重要。传统关系型数据库存在一些缺陷&#xff0c;例如存储效率低、查询耗时长等问题&…

服务案例|故障频发的一周,居然睡得更香!

医院运维有多忙&#xff1f; 医院运维&#xff0c;听起来平平无奇毫不惊艳&#xff0c;但其中的含金量&#xff0c;可不是“维持系统正常运行”就能总结的。毕竟医院对业务连续性的超高要求&#xff0c;让运维面对的问题都是暂时的&#xff0c;下一秒可能就有新问题需要发现解…

CountDownLatch和CyclicBarrier

JUC&#xff08;Java.util.concurrent&#xff09;是Java 5中引入的一个并发编程库&#xff0c;它包含了许多用于多线程处理的工具类和接口。JUC主要提供了以下特性&#xff1a; 线程池&#xff1a;线程池可以提高线程的使用效率&#xff0c;避免频繁地创建和销毁线程&#xff…

许战海战略文库|从丰田到等离子屏:技术领先为何失去市场?

引言&#xff1a;在探讨技术创新与市场需求之间的微妙关系时&#xff0c;个关键的问题浮现:为什么强大的技术优势并不总是等同于市场成功?从丰田汽车在电动车领域的挑战到日本等离子显示屏技术的衰落,市场趋势对企业成功存在决定性影响。企业需要在技术创新和市场需求之间找到…

聚焦数字化项目管理——2023年PMI项目管理大会亮点回顾

11月18日-19日&#xff0c;由PMI&#xff08;中国&#xff09;主办的2023年PMI项目管理大会在上海浦东嘉里大酒店圆满召开。本次大会以“数智时代&#xff0c;汇创未来”为主题&#xff0c;聚焦数智时代大背景下的项目管理行业发展和人才培养&#xff0c;吸引了海内外千余名项目…

9.3 Windows驱动开发:内核解析PE结构节表

在笔者上一篇文章《内核解析PE结构导出表》介绍了如何解析内存导出表结构&#xff0c;本章将继续延申实现解析PE结构的PE头&#xff0c;PE节表等数据&#xff0c;总体而言内核中解析PE结构与应用层没什么不同&#xff0c;在上一篇文章中LyShark封装实现了KernelMapFile()内存映…

AIGC变革BI行业,永洪发布vividime全球化品牌

大数据产业创新服务媒体 ——聚焦数据 改变商业 国内BI商业智能市场&#xff0c;一直有着“内永洪&#xff0c;外Tableau”的说法。成立于2012年的永洪科技经过十多年的发展&#xff0c;早已崛起为国内大数据行业的一支劲旅。 ChatGPT火爆出圈之后&#xff0c;AIGC快速渗透&am…

身份证号码校验

根据《新版外国人永久居留身份证适配性改造要点》&#xff0c;公司需要把代码中对身份证的校验进行优化 就文档内容可以看到需要优化的要点是&#xff1a; 新版永居证号码以 9 开头 受理地区代码出生日期顺序码校验码&#xff1b;&#xff08;共18位&#xff09; eg&#xff…

栈的生长方向不总是向下

据我了解&#xff0c;栈的生长方向向下&#xff0c;内存地址由高到低 测试 windows下&#xff1a; 符合上述情况 测试Linux下&#xff1a; 由此可见&#xff0c;栈在不同操作系统环境下&#xff0c;生长方向不总是向下

jetpack compose中实现丝滑的轮播图效果

写在前面 最近在翻Jetpack库&#xff0c;发现了DataStore&#xff0c;官方是这么说的&#xff1a; Jetpack DataStore 是一种数据存储解决方案&#xff0c;允许您使用协议缓冲区存储键值对或类型化对象。DataStore 使用 Kotlin 协程和 Flow 以异步、一致的事务方式存储数据。 …

18张值得收藏的高清卫星影像

这里分享的18张高清卫星影像&#xff0c;由吉林一号卫星拍摄。 原图来自长光卫星嘉宾在直播中分享的PPT演示文档。 18张高清卫星影像 吉林一号高分04A星&#xff0c;于2022年05月21日拍摄的北京紫禁城高清卫星影像。 北京紫禁城 云南昆明滇池国际会展中心高清卫星影像&…

劲松HPV防治诊疗中心提醒:做完HPV检查后,需留意这些事项!

在接受HPV检查后&#xff0c;有一些注意事项需要您注意。首先&#xff0c;要遵循医生的建议&#xff0c;并按照医生的指示进行后续治疗和随访。 其次&#xff0c;检查后可能会有些不适感&#xff0c;这是正常的现象&#xff0c;不必过于担心。但是&#xff0c;如果不适感持续加…

枚举 蓝桥oj DNA序列修正

题目详情&#xff1a; 简单翻译&#xff1a; 主要思路&#xff1a; 1 本题采用贪心思路&#xff0c;要使调整次数最少&#xff0c;就是尽量交换两个碱基对&#xff0c;而不是单个替换&#xff0c;因为本题已经说明只能每个碱基对只能交换一次&#xff0c;所以不考虑A与B交换再…

Java Swing管理系统万能模板 课程设计素材

JavaSwing管理系统万能模板 视频教程&#xff1a; 【课程设计】2小时学会JavaSwing课程设计-万能模板-图书管理系统-[你的课程我设计] 万能模板是用Java Swing开发的&#xff0c;包含管理系统常用的多角色登录、数据查询、添加、修改、删除。常用的管理系统都可以使用万能模板…

跨越行业边界,CodeMeter护航AI领域安全与合规

在人工智能&#xff08;AI&#xff09;技术如ChatGPT的推动下&#xff0c;工业视觉、医疗诊断和智能驾驶等领域正在经历重大变革。这些技术不仅扩大了应用范围&#xff0c;也带来了数据安全、软件授权保护和合规性等新挑战。 AI工业视觉正在推动制造和自动化的快速发展&#x…

格式化名称节点,启动Hadoop

1.循环删除hadoop目录下的tmp文件&#xff0c;记住在hadoop目录下进行 rm tmp -rf 使用上述命令&#xff0c;hadoop目录下为&#xff1a; 2.格式化名称节点 # 格式化名称节点 ./bin/hdfs namenode -format 3.启动所有节点 ./sbin/start-all.sh 效果图&#xff1a; 4.查看节…

【从入门到起飞】JavaSE—多线程(2)(生命周期,线程安全问题,同步方法)

&#x1f38a;专栏【JavaSE】 &#x1f354;喜欢的诗句&#xff1a;路漫漫其修远兮&#xff0c;吾将上下而求索。 &#x1f386;音乐分享【如愿】 &#x1f384;欢迎并且感谢大家指出小吉的问题&#x1f970; 文章目录 &#x1f354;生命周期&#x1f384;线程的安全问题&#…

代码随想录刷题】Day17 二叉树04

文章目录 1.【110】平衡二叉树&#xff08;优先掌握递归&#xff09;1.1 题目描述1.2 解题思路1.3 java代码实现 2.【257】二叉树的所有路径&#xff08;优先掌握递归&#xff09;2.1 题目描述2.2 解题思路2.3 java代码实现 3.【404】左叶子之和&#xff08;优先掌握递归&#…

从零开始安装并运行YOLOv5

从零开始安装并运行YOLOv5 该文主要实现用YOLOv5的基准检测为自己的视频片段渲染对象检测结果和边界框&#xff0c;本文大部分都是实操&#xff0c;帮助大家快速上手。 什么是YOLOv5&#xff1f; ​ yolo是一种用于对象检测的最先进的机器学习模型&#xff0c;yolo有不同的版…