当前位置: 代码迷 >> 综合 >> sortable.js 插件拖拽后视图出错解决
  详细解决方案

sortable.js 插件拖拽后视图出错解决

热度:58   发布时间:2024-02-29 10:59:08.0

问题说明:

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字段就尴尬了