带有子节点的树状表的父节点拖动排序#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://www.mzph.cn/news/869188.shtml

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

相关文章

【Python】已解决:SyntaxError: invalid character in identifier

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决&#xff1a;SyntaxError: invalid character in identifier 一、分析问题背景 在Python编程中&#xff0c;SyntaxError: invalid character in identifier是一个常见的编译…

面经-计算机网络-数据结构-堆

1.什么是堆 堆是一种满足以下条件的树&#xff1a; 堆中的每一个节点值都大于等于&#xff08;或小于等于&#xff09;子树中所有节点的值。或者说&#xff0c;任意一个节点的值都大于等于&#xff08;或小于等于&#xff09;所有子节点的值。 2.堆的用途 当我们只关心所有数…

tk Text文本框赋值,清空

import tkinter as tk# 创建主窗口 root tk.Tk() root.title("文本框内容赋值示例")# 创建一个Text小部件 text_area tk.Text(root, height10, width50) text_area.pack()# 将内容赋值给Text小部件 text_area.insert(tk.END, "这是文本框中的内容。\n")#…

android CameraX构建相机拍照

Android CameraX 是一个 Jetpack 支持库&#xff0c;旨在简化相机应用的开发工作。它提供了一致且易用的API接口&#xff0c;适用于大多数Android设备&#xff0c;并可向后兼容至Android 5.0&#xff08;API级别21&#xff09;。 CameraX解决了在多种设备上实现相机功能时所遇…

26.5 Django模板层

1. 模版介绍 在Django中, 模板(Templates)主要用于动态地生成HTML页面. 当需要基于某些数据(如用户信息, 数据库查询结果等)来动态地渲染HTML页面时, 就会使用到模板.以下是模板在Django中使用的几个关键场景: * 1. 动态内容生成: 当需要根据数据库中的数据或其他动态数据来生…

linux使用chattr与lsattr设置文件/目录防串改

背景 linux服务器下,防止某个文件/目录被串改(增删改),可以使用chattr与lsattr设置,这是一种保护机制,用于防止意外地修改或删除重要的文件内容。 chattr与lsattr使用 1.设置目录 图中/tmp/zhk,设置目录属性文件可能被设置为不可更改(immutable)或者只追加(append …

1.Frida框架-Frida环境搭建

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a;微尘网校 前置条件&#xff1a;需要科学上网 工具下载&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1rEEJnt85npn7N38Ai0_F…

python—读写csv文件

目录 csv库方法参数 读取数据 csv.reader方法 文件指定行或列数据读取操作 txt文件的readlines、read方法 csv.DictReader方法 写入数据 txt文件的write&#xff0c;writelines csv.writer方法 csv.DictWriter方法 读写联合(修改及插入数据) 读写csv 文件时&#xf…

【Notepad】Notepad_6.3.1 的中文版安装详情

目录 &#x1f33c;1. Notepad的认识 &#x1f33c;2. Notepad中文版安装详情 &#x1f33c;1. Notepad的认识 Notepad 是 Windows 操作系统中的一个文本编辑器程序&#xff0c;通常用于创建和编辑简单的文本文件&#xff0c;如文本文档 (.txt)。它非常轻量且功能简单&#…

【本地docker启动私有大模型】

一、最终效果 中英文对话 生成代码 二、资源配置 本文选择的模型运行内存需要 4G&#xff0c;因此宿主机建议内存大于8G&#xff0c;CPU建议 6 核以上&#xff1b; 参考博主该mac配置可以相对流畅运行。只需要 CPU资源&#xff0c;不需要 GPU。 三、搭建步骤 启动docker容…

Msfvenom制作自己的专属Shell

Msfvenom制作自己的专属Shell 如何通过Msfvenom来生成用户自己的专属Shell?有时候我们上传Shell到目标主机后&#xff0c;不仅我们自己可以连接&#xff0c;其他用户也可以连接&#xff0c;有时候会导致我们丢失该Shell&#xff0c;甚至该shell被用户发现并查杀。 实验环境 …

如何在 SwiftUI 中开发定制 MapKit 功能

文章目录 介绍地图样式imagery-map 地图交互地图控件总结 介绍 在上一篇文章中&#xff0c;我们探讨了 SwiftUI 中新的 MapKit API 的基础知识。现在&#xff0c;让我们深入 MapKit API 的定制点&#xff0c;以便根据我们的需求定制地图呈现。 地图样式 新的 MapKit API 引入…

LabVIEW开发阀门自动校准装置

1. 装置概述与目标 在工业和实验室环境中&#xff0c;阀门的准确性和稳定性对于流体控制和实验数据的可靠性非常重要。LabVIEW可以作为开发阀门自动校准装置的理想工具&#xff0c;提供高度可定制化的解决方案。 2. 硬件与设备选择 型号选择&#xff1a;为了实现阀门自动校准…

这8款宝藏软件,才是安卓手机必装App!

​AI视频生成&#xff1a;小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频https://aitools.jurilu.com/ 1.我的日记——My Diary My Diary 是一款带锁的免费安卓日记工具。 它可用于记录每日日记、秘密想法、旅程、心情追踪或任何私人时刻。 你可…

☺初识c++(语法篇)☺

目录 一命名空间&#xff08;namespace&#xff09;&#xff1a; 二cout与cin简述&#xff1a; 三缺省参数&#xff1a; 四函数重载&#xff1a; 五引用&#xff1a; 六内联函数: 七c中的nullptr简述&#xff1a; 一命名空间&#xff08;namespace&#xff09;&#xff1…

源码编译安装 LAMP

源码编译安装 LAMP Apache 网站服务基础Apache 简介安装 httpd 服务器 httpd 服务器的基本配置Web 站点的部署过程httpd.conf 配置文件 构建虚拟 Web 主机基于域名的虚拟主机基于IP 地址、基于端口的虚拟主机 MySQL 的编译安装构建 PHP 运行环境安装PHP软件包设置 LAMP 组件环境…

住宅代理、移动代理和数据中心代理之间的区别

如果您是一名认真的互联网用户&#xff0c;可能需要反复访问某个网站或服务器&#xff0c;可能是为了数据抓取、价格比较、SEO 监控等用例&#xff0c;而不会被 IP 列入黑名单或被 CAPTCHA 阻止。 代理的工作原理是将所有传出数据发送到代理服务器&#xff0c;然后代理服务器将…

Vuforia AR篇(八)— AR塔防上篇

目录 前言一、设置Vuforia AR环境1. 添加AR Camera2. 设置目标图像 二、创建塔防游戏基础1. 导入素材2. 搭建场景3. 创建敌人4. 创建脚本 前言 在增强现实&#xff08;AR&#xff09;技术快速发展的今天&#xff0c;Vuforia作为一个强大的AR开发平台&#xff0c;为开发者提供了…

maven项目读取文件错误

开发工具&#xff1a;idea 一个简单的maven项目&#xff0c;程序读取不到src/main/resources目录下的文件 寻找了一些原因后&#xff0c;还是没解决&#xff0c;最后灵机一动改了设置居然好了。 然后就解决了

怎样把图片转成pdf文件,简鹿格式工厂轻松批量搞定

信息的存储和分享方式变得越来越多样化&#xff0c;而PDF文件以其跨平台兼容性和内容完整性&#xff0c;成为了许多用户首选的文档格式。无论是在学术研究、商务办公&#xff0c;还是个人创作中&#xff0c;将图片转换为PDF文件的需求日益凸显。 想象一下&#xff0c;当你需要整…