element table拖拽排序,vue拖动排序组件
这篇文章主要为大家详细介绍了某视频剪辑软件中使用elementui与Sortable.js实现列表拖动排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了使用elementui与Sortable.js实现列表拖动排序的具体代码，供大家参考，具体内容如下
一、安装使用Sortable.js
1、安装
cnpm安装排序表-保存
2、在需要的vue页面单独引入
脚本
从"排序表"导入可排序的
导出默认值{
..
data() {
返回{
配饰师：[1,2,3,4,5,6,7,8,9]
}
}
..
}
/脚本
3、在生命周期mounted中注册事件以及在html中渲染数据
已安装(){
//可排序为要拖动的盒子数字正射影像图
算是吧。创建(文档。getelementbyid( sortAble )，{animation: 150})
}
div id=可排序
p v-for=(item，index)in accessory list :key= index“{ item } }/p
/div
说明：至此sortable.js已经可以看到拖动的效果了；
二、元数据不刷新问题
1、前面的只能是前端页面上看到数据，但是对于数据怎样拖动数组arrdata中的顺序仍旧未变，继续看：
只需要把安装好的中的算是吧。创建(文档。getelementbyid( sortAble )，{animation: 150})这块换为以下代码即可：
rowDrop() {
让那个=这个
//eslint-disable-next-line no-unused-vars
let Sortable=new Sortable(文档。getelementbyid( Sortable )，{
排序：真，
动画：150,
onEnd:函数(evt) {
那个。配件清单。拼接(evt。新索引，0，即。配件清单。拼接(evt。旧索引，1)[0])
让新数组=那个。配件清单。切片(0)
that.accessoryList=[]
那个. nextTick(function () {
that.accessoryList=newArray
})
}
})
}
现在数组配饰师就是改变顺序后的，即可提交至后台保存。
三、在elementUI中的弹窗中使用上述排序功能
说明：对于某些需求需要在埃尔对话的全屏弹窗中使用，比如系统管理，就会发现拖动失效，甚至还有报错；
尝试使用下面方法解决
1、原因：el对话框的数字正射影像图加载顺序问题，查阅资料就能知道埃尔对话的数字正射影像图操作区是一个异步加载的机制，因此在安装好的中不能调用该方法；
2、解决：使用组件将全屏弹窗写到一个单独组件内，如下：
模板
埃尔对话
v-if=fileManage
custom-class=oaDialog
:visible.sync=fileManage
附加到正文
宽度=100%
/div
div id=可排序
p v-for=(item，index)in accessory list :key= index“{ item } }/p
/div
/el-dialog
/模板
脚本
从"排序表"导入可排序的
导出默认值{
名称：文件管理，
data() {
返回{
fileManage: false，
配饰师：[1,2,3,4,5,6,7,8,9]
}
},
方法：{
init () {
this.fileManage=true
这个. nextTick(()={
//可排序。创建(文档。getelementbyid( sortAble )，{animation: 150})
this.rowDrop()
})
},
rowDrop() {
让那个=这个
//eslint-disable-next-line no-unused-vars
let Sortable=new Sortable(文档。getelementbyid( Sortable )，{
排序：真，
动画：150,
onEnd:函数(evt) {
那个。配件清单。拼接(evt。新索引，0，即。配件清单。拼接(evt。旧索引，1)[0])
让新数组=那个。配件清单。切片(0)
that.accessoryList=[]
那个. nextTick(function () {
that.accessoryList=newArray
})
}
})
}
}
}
/脚本
样式lang=scss 范围
/风格
3、父组件中使用
模板
文件管理引用=文件管理/文件管理
/模板
脚本
从导入文件管理/FileManage
导出默认值{
.
方法：{
open() {
这个。$参考文献FileManage.init()
}
}
}
/脚本
说明：这里利用了先加载数字正射影像图完成后再调用
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。