- 下载sortablejs包:npm install --save sortablejs
- 直接在页面中引入:
import Sortable from 'sortablejs'
- 拖拽函数:
mounted () {
this.rowDrop()
},
methods: {
// 行拖拽
rowDrop () {
const tbody = document.querySelector('.ant-table-content tbody')
const _this = this
let nowDrageRow = 0 // 当前拖拽的索引
Sortable.create(tbody, {
onEnd ({ newIndex, oldIndex }) {
const currRow = _this.fofList.splice(oldIndex, 1)[0]
_this.list.splice(newIndex, 0, currRow)
_this.list.forEach((item, index) => {
item.orderNum = index + 1
})
},
// 开始拖拽的时候
onStart: function (evt) {
nowDrageRow = evt.oldIndex
},
// 拖拽移动的时候
onMove: function (evt, originalEvent) {
if (nowDrageRow === _this.list.length - 1) {
return false // 禁止拖拽某一行
}
}
})
}
}
- 使用antd table展示数据列表,且最后一行为“合计”行,不允许拖拽排序。