对element table实行拖拽排序

最新推荐文章于 2024-05-14 13:47:57 发布

xiaokuangren_

最新推荐文章于 2024-05-14 13:47:57 发布

阅读量233

点赞数

文章标签：前端 css javascript

本文链接：https://blog.csdn.net/xiaokuangren_/article/details/132207754

版权

对element table实行拖拽排序

import Sortable from 'sortablejs'
mounted() {
 this.$nextTick(() => {
   this.tableDrag()
 })
}
methods: {
	tableDrag () { // .dragger-table --->添加到table上class
      const el1 = document.querySelectorAll('.dragger-table .el-table__body-wrapper')[0].querySelectorAll('table > tbody')[0]
      Sortable.create(el1, {
        disabled: false, // 是否开启拖拽
        ghostClass: 'sortable-ghost', // 拖拽样式
        animation: 150, // 拖拽延时，效果更好看
        group: { // 是否开启跨表拖拽
          pull: false,
          put: false
        },
        onEnd: (e) => { // 这里主要进行数据的处理，拖拽实际并不会改变绑定数据的顺序，这里需要自己做数据的顺序更改
          console.log('e', e)
          let arr = this.relationshipForShiftList // 获取表数据
          arr.splice(e.newIndex, 0, arr.splice(e.oldIndex, 1)[0]); // 数据处理
          this.$nextTick(function () {
            this.relationshipForShiftList = arr
          })
        }
      })
    },
}
<style lang="scss" scoped>
.sortable-ghost {
  opacity: 0.4;
  background-color: #F4E2C9;
}
</style>