tablesColumns: [{
dragEndColumn: {},//目标对象最后放置的位置
dragStartIndex: ""//目标对象原索引
renderHeader(index, column) {
if (‘renderHeader‘ in this.tablesColumns[index]) {
return this.tablesColumns[index].renderHeader(column, index);
} else {
return column.column || ‘‘;
}
},
//拖动开始 ---记录目标对象的索引，以判断是向前拖动还是向后拖动
dragstartEvent(index) {
this.dragStartIndex = index
},
//拖动过程---每移动一个对象都会进这个方法，只有最后一次进这个方法的是拖动结束放置的位置
dragenterEvent(ev, col) {
this.dragEndColumn = col
},
//拖动结束 ---删除原数组中的目标对象，并在放置位置加上目标对象
dragendEvent(ev, col) {
if (col.key != this.dragEndColumn.key) {
this.tablesColumns.forEach((item, index) => {
if (item.key == col.key) {
this.tablesColumns.splice(index, 1)
}
})
this.tablesColumns.forEach((el, index) => {
if (el.key == this.dragEndColumn.key) {
// var data = deepCopy(this.columns[this.dragStartIndex])
var indexCol = ""
if (this.dragStartIndex
indexCol = index + 1
} else {
indexCol = index
}
this.tablesColumns.splice(indexCol, 0, col)
this.dragEndColumn = {}
this.dragStartIndex = ""
return
}
})
}
}
vue drag 对表格的列进行拖动排序
标签：index 开始 item NPU tables body Owner ring 返回
原文地址：https://www.cnblogs.com/youngMe/p/9566294.html