Vue中使用elementui与Sortable.js实现列表拖动排序
作者：_yangyi
这篇文章主要为大家详细介绍了Vue中使用elementui与Sortable.js实现列表拖动排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了使用elementui与Sortable.js实现列表拖动排序的具体代码，供大家参考，具体内容如下
一、安装使用Sortable.js
1、安装
cnpm install sortablejs --save
2、在需要的vue页面单独引入
<script>
import Sortable from 'sortablejs'
export default{
.........
data() {
return {
accessoryList : [1,2,3,4,5,6,7,8,9]
}
}
.........
}
</script>3、在生命周期mounted中注册事件以及在html中渲染数据
mounted() {
//sortAble为要拖动的盒子dom
Sortable.create(document.getElementById('sortAble'), {animation: 150})
}<div id="sortAble">
<p v-for="(item, index) in accessoryList " :key="'' + index">{{item}}</p>
</div>说明： 至此sortable.js已经可以看到拖动的效果了；
二、元数据不刷新问题
1、前面的只能是前端页面上看到数据，但是对于数据怎样拖动数组arrdata中的顺序仍旧未变，继续看：
只需要把mounted中的Sortable.create(document.getElementById('sortAble'), {animation: 150})这块换为以下代码即可：
rowDrop() {
let that = this
// eslint-disable-next-line no-unused-vars
let sortable = new Sortable(document.getElementById('sortAble'), {
sort: true,
animation: 150,
onEnd: function (evt) {
that.accessoryList.splice(evt.newIndex, 0, that.accessoryList.splice(evt.oldIndex, 1)[0])
let newArray = that.accessoryList.slice(0)
that.accessoryList = []
that.$nextTick(function () {
that.accessoryList = newArray
})
}
})
}现在数组accessoryList就是改变顺序后的，即可提交至后台保存。
三、在elementUI中的弹窗中使用上述排序功能
说明：对于某些需求需要在el-dialog的全屏弹窗中使用，比如系统管理，就会发现拖动失效，甚至还有报错；
尝试使用下面方法解决
1、原因：el-dialog的dom加载顺序问题，查阅资料就能知道el-dialog的dom操作区是一个异步加载的机制，因此在mounted中不能调用该方法；
2、解决：使用组件将全屏弹窗写到一个单独组件内，如下：
<template>
<el-dialog
v-if="fileManage"
custom-class="oaDialog"
:visible.sync="fileManage"
append-to-body
width="100%">
</div>
<div id="sortAble">
<p v-for="(item, index) in accessoryList " :key="'' + index">{{item}}</p>
</div>
</el-dialog>
</template>
<script>
import Sortable from 'sortablejs'
export default {
name: 'FileManage',
data() {
return {
fileManage: false,
accessoryList : [1,2,3,4,5,6,7,8,9]
}
},
methods: {
init () {
this.fileManage = true
this.$nextTick(() => {
// Sortable.create(document.getElementById('sortAble'), {animation: 150})
this.rowDrop()
})
},
rowDrop() {
let that = this
// eslint-disable-next-line no-unused-vars
let sortable = new Sortable(document.getElementById('sortAble'), {
sort: true,
animation: 150,
onEnd: function (evt) {
that.accessoryList.splice(evt.newIndex, 0, that.accessoryList.splice(evt.oldIndex, 1)[0])
let newArray = that.accessoryList.slice(0)
that.accessoryList = []
that.$nextTick(function () {
that.accessoryList = newArray
})
}
})
}
}
}
</script>
<style lang="scss" scoped>
</style>3、父组件中使用
<template> <FileManage ref="FileManage"></FileManage> </template>
<script>
import FileManage from './FileManage'
export default {
.....
methods: {
open() {
this.$refs.FileManage.init()
}
}
}
</script>说明：这里利用了先加载dom完成后再调用
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。