Vue Elementui 使用sortablejs实现表格拖拽

Sortable.js是一款轻量级的拖放排序列表的js插件

安装Sortable.js

npm install sortablejs --save

引入表格拖拽依赖

 import Sortable from 'sortablejs'

给el-table添加属性

row-key="id"

添加行拖拽方法

      //行拖拽
      rowDrop() {
        //获取当前表格
        const tbody = document.querySelector('.el-table__body-wrapper tbody')
        const that = this
        //newIndex -- 新下标 oldIndex -- 旧下标
        Sortable.create(tbody, {
          onEnd({ newIndex, oldIndex }) {
            //移除原来的数据
            const currRow = that.tableData.splice(oldIndex, 1)[0]
            //移除原来的数据并插入新的数据
            that.tableData.splice(newIndex, 0, currRow)
          }
        })
      }

添加mounted

    mounted() {
      this.rowDrop()
    }

 

来源：oschina

链接：https://my.oschina.net/u/173975/blog/4929298