<template>
<div>
<el-table :data="tableData">
<el-table-column prop="showOrder" label="序号"></el-table-column>
</el-table>
</div>
</template>
<script>
// 下载 npm install sortablejs --save
import Sortable from 'sortablejs'
export default {
name: 'XTable',
data () {
return {
tableData: [
{ id: 1, showOrder: '1111' },
{ id: 2, showOrder: '2222' },
{ id: 3, showOrder: '3333' },
{ id: 4, showOrder: '4444' }
]
}
},
mounted () {
this.initSortable() // 需要调用
},
methods: {
// 初始化拖拽
initSortable () {
let data = [...this.tableData]
// 注意点:如果是嵌套的拖拽,如抽屉中的。需要通过 this.$refs.xxx.$el;获取dom元素
const el = document.querySelector('.el-table__body-wrapper tbody')
//创建拖拽对象
Sortable.create(el, {
sort: true, //是否可进行拖拽排序
animation: 150,
// delay: 1000, // 拖拽延时生效
//拖拽完成,对数据进行修改
onEnd: ({ newIndex, oldIndex }) => {
const oldIndexVal = data[oldIndex]
const newIndexVal = data[newIndex]
data.splice(oldIndex, 1, newIndexVal)
data.splice(newIndex, 1, oldIndexVal)
}
})
}
}
}
</script>
今天的文章sortablejs拖拽分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/9253.html