带有子节点的树状表的父节点拖动排序#Vue3#Sortable插件

带有子节点的树状表的父节点拖动排序#Vue3#Sortable插件

使用Sortable插件这里要保证获取到的是父节点的下标,属性newDraggableIndex获取到的就是只有父节点的下标。设置子节点不能被拖动,最后在逐个调用接口进行数据库中顺序的更新。

在这里插入图片描述

<template><div class="app-container" v-loading="sortLoading"><el-table v-if="refreshTable"class="draggable"v-loading="loading"border:data="menuList":row-key="getRowKey":default-expand-all="isExpandAll":tree-props="{ children: 'child', hasChildren: 'hasChildren' }"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table></div>
</template><script lang="ts" setup>
import Sortable from "sortablejs";function getRowKey(row: any) {return row.id + row.type + row.key;
}// 行拖拽
const rowDrag = function () {// 要拖拽元素的父容器const tbody = document.querySelector(".draggable .el-table__body-wrapper tbody");if (!tbody) return;Sortable.create(tbody as HTMLElement, {//  可被拖拽的子元素,设置只有父节点才能被拖动draggable: ".draggable .el-table__row.el-table__row--level-0",onEnd(event) {console.log("event", event);if (event.oldDraggableIndex !== undefined &&event.newDraggableIndex !== undefined) {const temp = [...menuList.value];const currRow = temp.splice(event.oldDraggableIndex, 1)[0];temp.splice(event.newDraggableIndex, 0, currRow);console.log("temp", temp);menuList.value = temp.map((item, i: number) => {console.log("item", item);const parentKey = `parent_${item.id}_${item.type}_${Date.now()}_${i}`;const child = item.child.map((child: any, index: number) => {const childrenKey = `children_${item.id}_${item.type}_${Date.now()}_${i}`;return {...child,key: childrenKey,};});return { ...item, child, key: parentKey };});console.log("menuList", menuList.value);asyncSort();}},});
};const sortLoading = ref(false);
// 更新菜单排序
function asyncSort() {sortLoading.value = true;const list = [...menuList.value];const apiList = list.map((item, i) => {return updateMenu({ ...item, sort: i + 1, pid: "" });});Promise.all(apiList).then((res) => {handleQuery();console.log("更新排序成功");}).catch(() => {console.log("部分更新错误");}).finally(() => (sortLoading.value = false));
}const tableData = [{         "id": "1711314432585502720","iD_Module": "1685955461712580611","code": "fixture","name": "治具管理","component": "/","path": "/fixture","type": 1,"isOutSide": false,"redirect": "/","alwaysShow": "Y","sort": 1,"icon": "fixture","enable": "Y","showEnable": "Y","pid": null,"createTime": "2023-10-09 17:35:30","updateTime": "2024-07-09 16:37:30","child": [{"id": "1711314714514034688","iD_Module": "1685955461712580611","code": "fixture_profile","name": "治具台账","component": "/","path": "profile","type": 2,"isOutSide": false,"redirect": "/","alwaysShow": "Y","sort": 1,"icon": "minus","enable": "Y","showEnable": "Y","pid": "1711314432585502720","createTime": "2023-10-09 17:36:37","updateTime": "2023-10-10 19:20:18","child": null},{"id": "1711314829744148480","iD_Module": "1685955461712580611","code": "fixture_inspect","name": "治具点检","component": "/","path": "inspect","type": 2,"isOutSide": false,"redirect": "/","alwaysShow": "Y","sort": 2,"icon": "minus","enable": "Y","showEnable": "Y","pid": "1711314432585502720","createTime": "2023-10-09 17:37:04","updateTime": "2023-10-10 19:20:27","child": null}]},{"id": "1724976315569934336","iD_Module": "1724975614743678976","code": "proposal","name": "提案改善","component": "/","path": "/proposal","type": 1,"isOutSide": false,"redirect": "/","alwaysShow": "Y","sort": 2,"icon": "proposal","enable": "Y","showEnable": "Y","pid": null,"createTime": "2023-11-16 10:22:56","updateTime": "2024-07-09 16:37:30","child": null,},
]
</script>

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

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

相关文章

层次分析法上课笔记

欢迎来到一夜看尽长安花 博客&#xff0c;您的点赞和收藏是我持续发文的动力 对于文章中出现的任何错误请大家批评指出&#xff0c;一定及时修改。有任何想要讨论的问题可联系我&#xff1a;3329759426qq.com 。发布文章的风格因专栏而异&#xff0c;均自成体系&#xff0c;不足…

Profibus转ModbusTCP网关模块实现Profibus_DP向ModbusTCP转换

Profibus和ModbusTCP是工业控制自动化常用的二种通信协议。Profibus是一种串口通信协议&#xff0c;它提供了迅速靠谱的数据传输和各种拓扑结构&#xff0c;如总线和星型构造。Profibus可以和感应器、执行器、PLC等各类设备进行通信。 ModbusTCP是一种基于TCP/IP协议的通信协议…

使用八股搭建神经网络

神经网络搭建八股 使用tf.keras 六步法搭建模型 1.import 2.train, test 指定输入特征/标签 3.model tf.keras.model.Sequential 在Squential,搭建神经网络 4.model.compile 配置训练方法&#xff0c;选择哪种优化器、损失函数、评测指标 5.model.fit 执行训练过程&a…

python开发prometheus exporter--用于hadoop-yarn监控

首先写python的exporter需要知道Prometheus提供4种类型Metrics 分别是&#xff1a;Counter, Gauge, Summary和Histogram * Counter可以增长&#xff0c;并且在程序重启的时候会被重设为0&#xff0c;常被用于任务个数&#xff0c;总处理时间&#xff0c;错误个数等只增不减的指…

昇思25天学习打卡营第16天|Vision Transformer图像分类

昇思25天学习打卡营第16天|Vision Transformer图像分类 前言Vision Transformer图像分类Vision Transformer&#xff08;ViT&#xff09;简介模型结构模型特点 环境准备与数据读取模型解析Transformer基本原理Attention模块 Transformer EncoderViT模型的输入整体构建ViT 模型训…

xcode项目添加README.md文件并进行编辑

想要给xcode项目添加README.md文件其实还是比较简单的&#xff0c;但是对于不熟悉xcode这个工具的人来讲&#xff0c;还是有些陌生&#xff0c;下面简单给大家讲一下流程。 选择“文件”>“新建”>“文件”&#xff0c;在其他&#xff08;滚动到工作表底部&#xff09;下…

k8s record 20240708

一、PaaS 云平台 web界面 资源利用查看 Rancher 5台 CPU 4核 Mem 4g 100g的机器 映射的目录是指docker重启后&#xff0c;数据还在 Rancher可以创建集群也可以托管已有集群 先docker 部署 Rancher&#xff0c;然后通过 Rancher 部署 k8s 想使用 kubectl 还要yum install 安…

leetcode--验证二叉搜索树

leetcode地址&#xff1a;验证二叉搜索树 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左 子树 只包含 小于 当前节点的数。 节点的右子树只包含 大于 当前节点的数。 所有左子树和右子树自身必…

71.WEB渗透测试-信息收集- WAF、框架组件识别(11)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;70.WEB渗透测试-信息收集- WAF、框架组件识别&#xff08;10&#xff09;-CSDN博客 如果有…

人工智能和机器学习 (复旦大学计算机科学与技术实践工作站)20240703(上午场)人工智能初步、mind+人脸识别

前言 在这个科技日新月异的时代&#xff0c;人工智能&#xff08;AI&#xff09;已经逐渐渗透到我们生活的方方面面&#xff0c;从智能家居到自动驾驶&#xff0c;无一不彰显着AI的强大潜力。而人脸识别技术作为AI领域的一项重要应用&#xff0c;更是以其高效、便捷的特点受到了…

人工智能算法工程师(中级)课程2-Opencv视觉处理之高级操作

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下人工智能算法工程师(中级)课程2-Opencv视觉处理之高级操作。在上一节课中的OpenCV基础操作我们了解到OpenCV是一个开源的计算机视觉软件库。它提供了各种视觉处理函数&#xff0c;并支持多种编程语言&#xff0c;如…

USB眼图eye diagram测试

前言: USB有一种测量称为EYE图或信号完整性测试。考虑数字信号从发射机传输到接收机的过程。到达接收器的信号质量可能受到许多因素的影响,包括发射器、电缆或PCB迹线以及连接器。信号质量也被称为信号完整性。眼图是一种用于快速评估数字信号质量的图形工具。眼图这个名字之…

Gymnasium 借游戏来学习人工智能

既然有了免费的linux系统GPU&#xff0c;干脆演示一下使用drivecolab套件来训练模型。 !apt-get install -y build-essential swig !pip install box2d-py !pip install gymnasium[all] !pip install gymnasium[atari] gymnasium[accept-rom-license] !pip install stable_bas…

Python函数 之 模块和包

1.模块 1, 在Python 中, 每个以 .py 结尾的 Python 代码⽂件 都可以称为是⼀个模块。 2, 在模块中 别⼈书写好的功能(变量, 函数, 类)&#xff0c;我们可以拿来直接使⽤。 3, 我们自己写的代码文件&#xff0c; 想要作为模块让别⼈使⽤, 你的代码⽂件名(模块名) 满足标识符的规…

Linux驱动开发-03字符设备驱动框架搭建

一、字符设备驱动开发步骤 驱动模块的加载和卸载&#xff08;将驱动编译模块&#xff0c;insmod加载驱动运行&#xff09;字符设备注册与注销&#xff08;我们的驱动实际上是去操作底层的硬件&#xff0c;所以需要向系统注册一个设备&#xff0c;告诉Linux系统&#xff0c;我有…

JVM是如何创建一个对象的?

哈喽&#xff0c;大家好&#x1f389;&#xff0c;我是世杰。 本文我为大家介绍面试官经常考察的**「Java对象创建流程」** 照例在开头留一些面试考察内容~~ 面试连环call Java对象创建的流程是什么样?JVM执行new关键字时都有哪些操作?JVM在频繁创建对象时&#xff0c;如何…

Studying-代码随想录训练营day33| 动态规划理论基础、509.斐波那契函数、70.爬楼梯、746.使用最小花费爬楼梯

第33天&#xff0c;动态规划开始&#xff0c;新的算法&#x1f4aa;(ง •_•)ง&#xff0c;编程语言&#xff1a;C 目录 动态规划理论基础 动态规划的解题步骤 动态规划包含的问题 动态规划如何debug 509.斐波那契函数 70.爬楼梯 746.使用最小花费爬楼梯 总结 动态…

LeetCode热题100刷题10:46. 全排列、78. 子集、17. 电话号码的字母组合、39. 组合总和、138. 随机链表的复制

回溯问题 46. 全排列 全排列问题&#xff1a; path 递归终止条件&#xff1a;path中是否已存储所有元素&#xff1b; for循环处理节点集合&#xff1a;used0未被使用的元素 class Solution { public:vector<int> path;vector<vector<int>> res;void backt…

HTML 标签简写和全称及其对应的中文说明和实例

<!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>HTML 标签简写及全称</title><style>…

Linux udp编程

我最近开了几个专栏&#xff0c;诚信互三&#xff01; > |||《算法专栏》&#xff1a;&#xff1a;刷题教程来自网站《代码随想录》。||| > |||《C专栏》&#xff1a;&#xff1a;记录我学习C的经历&#xff0c;看完你一定会有收获。||| > |||《Linux专栏》&#xff1…