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

根据业务需要,实现树结构的节点新增编辑删除功能,主要逻辑是利用树节点的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>

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

prometheus基本介绍 prometheus和zabbix的区别 grafana可视化工具

一、 promethues概念prometheus介绍promethues的特点prometheus的工作原理prometheus的架构 二、promethues和zabbix的区别三、prometheus安装部署prometheus下载安装prometheus启动浏览器访问查看暴露指标将Prometheus配置为systemd管理 配置node_exporter监控项node_promethe…

GNSS位移监测站系统是什么

WX-WY4G 一、GNSS位移监测站系统的工作原理GNSS位移监测站系统是一种基于导航卫星系统&#xff08;GNSS&#xff09;的高精度位移监测技术。它通过接收和处理来自卫星的信号&#xff0c;对地表物体的位置进行精度的实时监测。这个系统具有可靠性的特点&#xff0c;被广泛应用于…

Postgresql常用命令函数

1、string_agg()函数 1.1用法: string_agg(expression, delimiter)&#xff0c;参数类型(text, text) or (bytea, bytea)&#xff0c;返回类型和参数类型一致,第一个参数是字段名&#xff0c;第二个参数是样式&#xff0c;比如&#xff0c;或者#分隔。 1.2实战: SELECT * FR…

干货|数据资产评估的基本方法和选择方法

作为一项资产&#xff0c;数据应当拥有可计量的实际价值。所谓数据价值评估&#xff0c;即是指通过专业化的数据质量评价和价值评估&#xff0c;对数据进行客观评估&#xff0c;使其成为可计量的资产&#xff0c;并确定其具体的价值。这可以借助各种评估方法和指标&#xff0c;…

股票扩展功能(十)

A-扩展功能 文章目录 A-扩展功能一. 展示最近10天的斋戒信息, 以 PDF进行预览二. 展示最近10天的斋戒信息, 以 data list 进行响应 一. 展示最近10天的斋戒信息, 以 PDF进行预览 接口描述: 接口地址:/StockApi/extFasting/show 请求方式&#xff1a;GET consumes: produce…

2023年中国AI大模型行业发展趋势分析:未来发展将走向通用化和专用化并行[图]

AI大模型是AI预训练大模型的简称&#xff0c;通过在大规模数据上进行预训练&#xff0c;无需大量微调即可支持各种应用&#xff0c;具备多层神经网络结构、高级优化算法和强大计算资源&#xff0c;显著提升了AI的通用性和实用性。 AI大模型特点及意义 资料来源&#xff1a;共研…

动态规划十大经典问题

动态规划十大经典问题 动态规划十大经典问题 数塔取数问题、矩阵取数问题、最大连续子段和、最长递增子序列、最长公共子序列、最长公共子串、最短编辑距离、背包问题、正整数分组、股票买卖问题。 1、数塔取数问题 // 数塔取数问题 public static int dataTowerAccess(int[]…

自定义类型之结构体

&#x1d649;&#x1d65e;&#x1d658;&#x1d65a;!!&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦ &#x1f44f;&#x1f3fb;‧✧̣̥̇:Solitary-walk ⸝⋆ ━━━┓ - 个性标签 - &#xff1a;来于“云”的“羽球人”。…

Javaweb实现数据库简单的增删改查

JDBC介绍 JDBC &#xff08; Java Data Base Connectivity &#xff09; 是一 种 Java 访问 数据库 的技术&#xff0c;它提供 执行 SQL 语句的 Java API &#xff0c;由 一组 类 和接口组成&#xff0c;可以为 不同的 数据库提供统一访问 JDBC工作原理 JDBC应用编程 1、准备…

北醒携全球首款256线车规量产激光雷达亮相广州国际车展

11月17日&#xff0c;北醒携全球首款256线车规量产激光雷达亮相广州国际车展。在车展期间&#xff0c;北醒还公布了与广州花都区人民政府达成投资合作&#xff0c;获滴滴自动驾驶投资以及与捷普联合打造的全球首条量产256线级别车规激光雷达的生产线即将贯通的等多条利好信息&a…

快时尚品牌Halara登上TikTok美国小店榜Top 5,运动健身风靡TikTok

TikTok Shop美国电商数据周榜&#xff08;11/06-12&#xff09;已出&#xff0c;具体信息如下&#xff1a; 上周总GMV达到5850万美元&#xff0c;日均出单840万美元&#xff1b;单日出单最高达2110万美元&#xff0c;是当前美国单日最高销售额&#xff1b; 截至11月12日&…

Postman接口测试 —— 设置断言和集合运行

一、常见的5种断言方法 Postman是一款非常强大的API接口调式工具&#xff0c;它自带断言方法&#xff0c;不需要学习JavaScript脚本&#xff0c;非常方便。 &#xff08;1&#xff09;Status code&#xff1a;Code is 200(校验接口返回结果的状态码) &#xff08;2&#xff09…

轻松答题:用Python编写网页自动答题脚本助你高分通过

嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! python更多源码/资料/解答/教程等 点击此处跳转文末名片免费获取 环境使用: Python 3.10 解释器 Pycharm 编辑器 模块使用: from selenium import webdriver —> 自动测试模块 pip install selenium3.141.0 <指定版本安…

Apache DolphinScheduler 3.0.0 升级到 3.1.8 教程

安装部署的流程可参考官网的文档 Version 3.1.8/部署指南/伪集群部署(Pseudo-Cluster) https://dolphinscheduler.apache.org/zh-cn/docs/3.1.8/guide/installation/pseudo-cluster 本文开始之前&#xff0c;我先补充说明一下升级 Apache DolphinScheduler 的几个关键点 元数…

C++——异常

作者&#xff1a;几冬雪来 时间&#xff1a;2023年11月21日 内容&#xff1a;C板块异常讲解 目录 前言&#xff1a; 异常&#xff1a; C语言传统处理错误的方式&#xff1a; 捕获异常&#xff1a; 异常的相关特性&#xff1a; string与抛异常: catch(...)&#xff1a; …

Monoxide relay机制和连弩挖矿

这篇文章就两个点&#xff0c;relay机制 、 连弩挖矿 relay 最终原子性 Eventual Atomicity 一笔跨链交易&#xff0c;从取款shard中发出&#xff0c;到存款shard中. 当收款shard中将这笔夸片交易打包上链后&#xff0c;原子性才执行结束。 这样做的延迟是比较小的。 如何应…

基于单片机的空气质量实时监测系统(论文+源码)

1. 系统设计 通过文献和市场调查&#xff0c;本设计的实现方案框架是以单片机为核心控制处理器搭建外围的功能模块如温度传感器模块、湿度传感器检测模块、二氧化碳传感器检测设备模块、无线通信模块和蜂鸣器声光报警提示模块来实现&#xff0c;辅以显示模块来展示。 该系统通…

什么是神经网络(Neural Network,NN)

1 定义 神经网络是一种模拟人类大脑工作方式的计算模型&#xff0c;它是深度学习和机器学习领域的基础。神经网络由大量的节点&#xff08;或称为“神经元”&#xff09;组成&#xff0c;这些节点在网络中相互连接&#xff0c;可以处理复杂的数据输入&#xff0c;执行各种任务…

Find My自行车|苹果Find My技术与自行车结合,智能防丢,全球定位

自行车&#xff0c;这项古老而简单的交通工具&#xff0c;近年来在中国经历了一场令人瞩目的复兴。从城市的街头巷尾到乡村的田园小路&#xff0c;自行车成了一种新的生活方式&#xff0c;一个绿色出行的选择。中国的自行车保有量超过两亿辆&#xff0c;但是自行车丢失事件还是…

为什么需要MuleSoft?如何与Salesforce协同工作?

MuleSoft通过一个集成平台将应用程序及其数据(跨云和内部云)连接起来。这被称为iPaaS&#xff0c;可将云应用程序相互集成&#xff0c;以及与本地和传统应用程序集成。 MuleSoft非常适合希望过渡到云的组织&#xff0c;提供了一种强大的集成解决方案。随着组织越来越依赖云及其…