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

  • Z时代
  • 2024-03-14
  • 分类：IT

在网上找了一段代码实现了表格的行拖拽
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()

},

拖拽表格的行后，怎么维持第一列就是id不变？ 拖拽后变成了拖拽表格的行后，怎么维持第一列就是id不变？

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

求解

回答：

拖动完成遍历数组更新 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)
    }

以上是 拖拽表格的行后，怎么维持第一列就是id不变？ 的全部内容， 来源链接： utcz.com/p/935837.html

回到顶部