1.安装
npm i sortablejs
2.使用sortableJs
import Sortable from 'sortablejs'
mounted () {
this.getSortable()
},
//getSortable方法
getSortable () {
const tbody = document.querySelector('.el-table__body-wrapper tbody')
const _this = this
this.sortObj = Sortable.create(tbody, {
// 可滚动
scroll: true,
// 拖拽结束
onEnd ({ newIndex, oldIndex }) {
_this.$confirm('请确定是否保存本次排序修改?', '提示', {
confirmButtonText: '确定提交',
cancelButtonText: '我再想想',
type: 'warning'
}).then(() => {
if (newIndex !== oldIndex) {
const currRow = _this.sortTableData.splice(oldIndex, 1)[0]
_this.sortTableData.splice(newIndex, 0, currRow)
let sortedIdstr = _this.sortTableData.map(item => {
return item.productId
}).join(',')
console.log(sortedIdstr)
}
}).catch(() => {
// 重新获取表格数据 先清空
_this.tableData = []
_this.$nextTick(function () {
_this.getList()
})
})
}
})
},
3.销毁
this.sortObj.destroy()