vue elementUi+sortable.js实现嵌套表格拖拽问题
更新时间：2024年06月07日 16:29:08 作者：一杯白水~
这篇文章主要介绍了vue elementUi+sortable.js实现嵌套表格拖拽问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue elementUi+sortable.js嵌套表格拖拽
首先说下项目需求，一个多层嵌套的表格，行可以进行拖拽排序，但不能跨主级去拖拽，下拉可以异步获取数据，考虑了很久，还是用最熟悉的vue+element来做，但是element没有拖拽排序的功能，所以在此基础上加入sortable.js去实现拖拽功能。
后台返回的排序规则是 每个数据都带有3个属性 id next prev
用这3个属性实时的去更新排序
- id表示这一条数据的id
- next表示下一条数据的id
- prev表示上一条数据的id
html部分
data部分
flattArray:[], originalData:[], tableData: [], arr:[], maps:new Map()
我这里定义了四个数组和一个map
flattArray是平铺的数据 originalData数组也是平铺的数据(以防数据出错，没有啥实际用途) tableData是表格渲染的数据 arr是点击下拉异步请求的数据
maps是tableData改变后去重新渲染数据用的
methods部分
首先我定义了一个方法去深拷贝，这样改变一个数据的时候，其他数据不会改变
//深拷贝
getNewObject(val) {
let resObj = JSON.stringify(val);
return JSON.parse(resObj);
},加载页面从接口 获取 tableData数据 并深拷贝 tableData
getDetails(id){
axios.get(url).then(res =>{
if(res.data.code === 0){
this.tableData = res.data.data
this.tableData.map( item =>{
item.hasChildren = true
delete item.children
})
this.flattArray = this.getNewObject(this.tableData)
this.originalData = this.getNewObject(this.tableData)
}else{
this.$message.error('网络错误');
}
}).catch(function (error) {
this.$message.error('网络错误');
});
},这里表格就已经渲染出来了 ，因为下拉的数据要异步去获取，所以在element提供的下拉事件里面去请求数据，这里去获取子级的数据，并给maps赋值，利用递归，把数据平铺、组装。
//点击下拉图标异步加载数据
load(tree, treeNode, resolve) {
this.maps.set(tree.id, { tree, treeNode, resolve })
axios.get(`url` + tree.id).then(res => {
if (res.data.code == 0) {
this.arr = res.data.data
this.arr.map(item => {
item.hasChildren = true
delete item.children
this.flattArray.push(item)
})
resolve(this.arr)
const tree = buildTree(this.flattArray, 1);
//组装tree
function buildTree(nodes, parent) {
const res = [];
for (let item of nodes) {
if (item.parentId === parent) {
const children = buildTree(nodes, item.id);
if (children.length) {
item.children = children;
}
res.push(item);
}
}
return res;
}
//平铺tree
let result = [];
function flatTree(nodes, parentId) {
if (!nodes || nodes.length === 0) return [];
nodes.forEach(node => {
result.push(node);
return flatTree(node.children, node.id);
});
}
flatTree(tree, 1);
this.originalData = result
this.getNewObject(this.originalData)
} else {
this.$message.error('没有更多消息了');
}
})
},定义的行拖拽方法，因为排序是用的3个属性去排序的，所以有3种情况去考虑
- 一是拖动到最上级，这样prev的值就为空
- 二是拖动到最下级，next为空
- 三是正常的拖动，next prev都不为空
rowDrop() {
this.$nextTick(() => {
const tbody = document.querySelector('.el-table__body-wrapper tbody')
const _this = this
Sortable.create(tbody, {
animation: 300,
sort: true,
onEnd({
oldIndex,
newIndex,
item
}) {
const sourceObj = _this.originalData[oldIndex - 1] // 原本的位置
const targetObj = _this.originalData[newIndex - 1] // 移动到的位置
const frontObj = _this.originalData[newIndex - 2] //移动后位置的上一级
const behindObj = _this.originalData[newIndex] //移动后位置的下一级
if(sourceObj.parentId != targetObj.parentId) {
_this.$message.error("不支持跨级拖动,请拖回原来位置")
location.reload();
return;
}
let data = [];
if( oldIndex < newIndex ){//向下移动
//上一级
let predata = {
id: targetObj.id,
next: sourceObj.id,
prev: targetObj.prev
}
//自己
let curdata = {
id: sourceObj.id,
next: targetObj.next,
prev: targetObj.id,
groupId: sourceObj.groupId
}
//下一级
let nextdata = null
if (behindObj != undefined && sourceObj.parentId == behindObj.parentId) {
nextdata = {
id: behindObj.id,
next: behindObj.next,
prev: sourceObj.id
}
}
if(nextdata){
data.push(curdata, predata, nextdata)
}else{
data.push(curdata, predata)
}
_this.postdata(data, sourceObj.parentId)
}else if( oldIndex > newIndex ){//向上移动
//上一级
let predata = null
if (frontObj != undefined && sourceObj.parentId == frontObj.parentId) {
predata = {
id: frontObj.id,
next: sourceObj.id,
prev: frontObj.prev
}
}
//自己
let curdata = {
id: sourceObj.id,
next: targetObj.id,
prev: targetObj.prev,
groupId: sourceObj.groupId
}
//下一级
let nextdata = {
id: targetObj.id,
next: targetObj.next,
prev: sourceObj.id
}
if(predata){
data.push(curdata, predata, nextdata)
}else{
data.push(curdata, nextdata)
}
_this.postdata(data, sourceObj.parentId)
}
}
})
})
},mounted 里面去加载 改变行的方法
mounted() {
this.rowDrop()
},最后再去动态的更新数据
refreshLoadTree(parentId) {
// 根据父级id取出对应节点数据
const {tree, treeNode, resolve} = this.maps.get(parentId)
this.$set(this.$refs.tableData.store.states.lazyTreeNodeMap, parentId, [])
if (tree) {
this.load(tree, treeNode, resolve)
}
},到这里需求已经实现了，就没有去深入的挖掘，可能会有问题，但是隔的时间太久了，基本忘光了。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue项目中解决 IOS + H5 滑动边界橡皮筋弹性效果(解决思路)
最近遇到一个问题，我们在企业微信中的 H5 项目中需要用到table表格（支持懒加载 上划加载数据），但是他们在锁头、锁列的情况下，依旧会出现边界橡皮筋效果，这篇文章主要介绍了vue项目中解决 IOS + H5 滑动边界橡皮筋弹性效果,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了vue组写一个组件,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了vue中巧用三元表达式解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了mpvue跳转页面及注意事项的相关资料,需要的朋友可以参考下2018-08-08
最近上线一个项目,手机网站进行调起支付宝App支付,做起来还是满顺手的,在此做个记录,这篇文章主要给大家介绍了关于前端H5微信支付宝支付实现方法的相关资料,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了vue项目如何全局修改el-button样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vue中的.capture和.self区分及初步理解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
父组件传递给子组件的数据,如果是一个复杂对象（例如一个数组或对象）,那么子组件只会监听对象的引用而不是对象的内容,这意味着当对象的内容发生变化时,子组件不会更新,本文给大家介绍了vue子组件不刷新的三种解决方案,需要的朋友可以参考下2024-03-03
本文主要介绍了浅谈Vue组件及组件的注册方法，详细的介绍了什么是组件，及其组件注册的两种方式(全局和局部)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
Vue使用pdf.js和docx-preview实现docx和pdf的在线预览
这篇文章主要为大家详细介绍了在Vue中使用pdf.js和docx-preview实现docx和pdf的在线预览的相关知识,文中的示例代码讲解详细,需要的可以参考下2025-03-03
最新评论