问题说明:
vue+element-ui+sortable实现el-table拖拽功能
结果拖拽后发现数据更新了,视图没更新
行拖拽代码:
/*** 行拖拽*/rowDrop () {// 此时找到的元素是要拖拽元素的父容器const tbody = document.querySelector('.el-table__body-wrapper tbody')const _this = thisthis.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字段就尴尬了