拖拽表格的行后,怎么维持第一列就是id不变?

在网上找了一段代码实现了表格的行拖拽
sortlist() {

  const tbody = document.querySelector('.el-table__body-wrapper tbody')
  const _this = this
  Sortable.create(tbody, {
    onEnd({ newIndex, oldIndex }) {
      const currRow = _this.newsList.splice(oldIndex, 1)[0]
      _this.newsList.splice(newIndex, 0, currRow)
    }
  })
},

mounted() {
this.sortlist()

},

image.png 拖拽后变成了image.png

有什么方法能让第一列的id保持不变吗 只让后面的内容改变 id是我scope.$index生成的

求解

阅读 1.8k
2 个回答

拖动完成遍历数组更新 id

使用的sortablejs吧,这个文档有点问题,最新的貌似api变动了,和很多的写的不一样了。

我这里建议把onEnd换成onUpdate,另外table的rowKey(就是每一行的key)不能设置为index(拖拽时index会变动,移除和添加时数组的索引会变),需要使用单独的key(newsList里拿吧,是后端数据直接用后端id),不然拖拽数据更新渲染会有问题

 onUpdate(event) {
      const currRow = _this.newsList.splice(event.oldDraggableIndex, 1)[0]
      _this.newsList.splice(event.newDraggableIndex, 0, currRow)
    }
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题