问题说明:
vue+element-ui+sortable实现el-table拖拽功能
结果拖拽后发现数据更新了,视图没更新
行拖拽代码:
/**
* 行拖拽
*/
rowDrop () {
// 此时找到的元素是要拖拽元素的父容器
const tbody = document.querySelector('.el-table__body-wrapper tbody')
const _this = this
this.dragObj = Sortable.create(tbody, {
// 指定父元素下可被拖拽的子元素
draggable: ".el-table__row",
onEnd ({ newIndex, oldIndex }) {
const currRow = _this.projectList.splice(oldIndex, 1)[0]
_this.projectList.splice(newIndex, 0, currRow)
}
})
// 初始无法拖动
this.dragObj.option('disabled', true)
},
解决方法:
一定要指定row-key为唯一字段!!!
我查到的很多博客都告诉我加入row-key, 示例: row-key="id"
但是朋友们注意了,这个id只要是唯一标识列表数据的一个字段就可以
我们的常用命名是id
但是我这次返回的数据中没有id字段就尴尬了