TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
剑轩
故如虹,知恩;故如月,知明
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
CSS
15篇
微服务
41篇
Git
14篇
.NET
102篇
移动开发
33篇
软件架构
23篇
.NET Core
119篇
.NET MVC
11篇
英语
3篇
随笔
86篇
Bootstrap
3篇
Redis
21篇
编辑器
10篇
Js相关
15篇
虚拟化
8篇
更多
Oracle
7篇
Python
14篇
数据库
26篇
EF
17篇
微信
3篇
前端
151篇
消息队列
6篇
docker
41篇
多线程
1篇
Java
4篇
软件基础
2篇
C++
2篇
WCF
7篇
Linux
7篇
nginx
5篇
K8S
9篇
ABP
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
vue3 element plus table+Sortable.js 行拖动,表格拖动
1174
人阅读
2021/3/23 16:23
总访问:
3997313
评论:
0
收藏:
0
手机
分类:
前端
要先安装好Sortable.js依赖 ``` cnpm install sortable.js ``` ### 实现拖动的代码如下 可以直接复制运行 ``` <template> <div class="app-container"> <el-card> <el-table :data="state.tableData" style="width: 100%"> <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> </el-card> </div> </template> <script lang="ts" setup> import { defineAsyncComponent, reactive, toRefs, onMounted, ref } from 'vue' import Sortable from 'sortablejs' const state = reactive({ tableData: [ { date: '2016-05-03', name: 'Tom-1', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-02', name: 'Tom-2', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-04', name: 'Tom-3', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-01', name: 'Tom-4', address: 'No. 189, Grove St, Los Angeles', }, ] }) //行拖拽 const dragSort = () => { let that = this; // 首先获取需要拖拽的dom节点 const el1 = document.querySelectorAll('.el-table__body-wrapper')[0].querySelectorAll('table > tbody')[0]; Sortable.create(el1, { disabled: false, // 是否开启拖拽,false为开启 ghostClass: 'sortable-ghost', //拖拽样式 animation: 150, // 拖拽延时,效果更好看 group: { // 是否开启跨表拖拽 pull: false, put: false }, onEnd: (evt: any) => { //进行数据的处理,拖拽实际并不会改变绑定数据的顺序 console.log("拖动结束了,", evt) // 可以获取拖动前与拖动后的序号 const { newIndex, oldIndex } = evt console.log(oldIndex, newIndex) // 数据源不会变的哦 console.log(state.tableData) } }); } onMounted(() => { // 实现行拖拽。这个方法一般都要放到数据回来之后,比如数据是通过接口回来的 dragSort() }) </script> <style scoped="scoped" lang="scss"> </style> ``` ### 进行绑定的数据源处理,拖拽实际并不会改变绑定数据的顺序 一般存储改造后的数据就可以了,调用存储方法存储一下就行了。这里要特别注意`el-table的row-id属性这个必需要添加,否则进行数据源操作后数据顺序会错乱哦` ``` <template> <div class="app-container"> <el-card> <el-table :data="state.tableData" row-key="id" style="width: 100%"> <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> </el-card> </div> </template> <script lang="ts" setup> import { defineAsyncComponent, reactive, toRefs, onMounted, ref } from 'vue' import Sortable from 'sortablejs' const state = reactive({ dictTableKey:1, tableData: [ { id:"1", date: '2016-05-03', name: 'Tom-1', address: 'No. 189, Grove St, Los Angeles', }, { id:"2", date: '2016-05-02', name: 'Tom-2', address: 'No. 189, Grove St, Los Angeles', }, { id:"3", date: '2016-05-04', name: 'Tom-3', address: 'No. 189, Grove St, Los Angeles', }, { id:"4", date: '2016-05-01', name: 'Tom-4', address: 'No. 189, Grove St, Los Angeles', }, ] }) //行拖拽 const dragSort = () => { let that = this; // 首先获取需要拖拽的dom节点 const el1 = document.querySelectorAll('.el-table__body-wrapper')[0].querySelectorAll('table > tbody')[0]; Sortable.create(el1, { disabled: false, // 是否开启拖拽,false为开启 ghostClass: 'sortable-ghost', //拖拽样式 animation: 150, // 拖拽延时,效果更好看 group: { // 是否开启跨表拖拽 pull: false, put: false }, onEnd: (evt: any) => { //进行数据的处理,拖拽实际并不会改变绑定数据的顺序 console.log("拖动结束了,", evt) // 可以获取拖动前与拖动后的序号 const { newIndex, oldIndex } = evt console.log(oldIndex, newIndex) // 数据源不会变的哦 console.log("改造前的数据源", state.tableData) // 这样可以把拖动前的那一行取出来 // const currRow = state.tableData[oldIndex] // 把拖动前的那一行干掉并且取出来 const currRow = state.tableData?.splice(oldIndex, 1)[0] // 把拖动前的那一行放到拖动后的位置 state.tableData?.splice(newIndex, 0, currRow) // 一般存储改造后的数据就可以了,调用存储方法存储一下就行了。 } }); } onMounted(() => { // 实现行拖拽。这个方法一般都要放到数据回来之后,比如数据是通过接口回来的 dragSort() }) </script> <style scoped="scoped" lang="scss"></style> ``` **如果不想改变数据源,可以复制一份数据源出来改造:** 当然这种情况还是比较少的,一般都直接操作数据源了,存储也好存储,不然可能还要维护多份数据 ``` onEnd: (evt: any) => { //进行数据的处理,拖拽实际并不会改变绑定数据的顺序 console.log("拖动结束了,", evt) // 可以获取拖动前与拖动后的序号 const { newIndex, oldIndex } = evt console.log(oldIndex, newIndex) // 数据源不会变的哦 console.log("改造前的数据源",state.tableData) // 这样可以把拖动前的那一行取出来 // const currRow = state.tableData[oldIndex] // 复制一份数据出来改造 let copyData = JSON.parse(JSON.stringify(state.tableData)) // 把拖动前的那一行干掉并且取出来 const currRow = copyData?.splice(oldIndex, 1)[0] // 把拖动前的那一行放到拖动后的位置 copyData?.splice(newIndex, 0, currRow) console.log("改造后的数据源",copyData) // 一般用保存后的数据,调用存储方法存储一下就行了 //state.tableData = copyData } ``` ### dom节点可以通过vue3的ref来获取,特别是封装成组件后每个组件里边的表格都需要拖动的情况 ``` <div ref="tableDataWrappeRef"> <el-card> <el-table :data="state.tableData" style="width: 100%"> <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> </el-card> </div> ``` ts部分: ``` // dom节点可以通过vue3的ref来获取,特别是封装成组件后每个组件里边的表格都需要拖动的 const el1 = tableDataWrappeRef.value.querySelectorAll('.el-table__body-wrapper')[0].querySelectorAll('table > tbody')[0]; ``` **注意ref要放到dom对象上面比如div,不要放到组件上面,也就是不要放到el-table上面,比如不要这么写:** 这样放到组件上面获取不到dom节点哦 ``` <el-card ref="tableDataWrappeRef"> <el-table :data="state.tableData" style="width: 100%"> <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> </el-card> ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}