el-table拖动排序

html#

 <el-table ref="multipleTable" :data="tableData" align="left" border class="mytable" row-key="id">
            <el-table-column :index="indexMethod" align="center" type="index"></el-table-column>
            <el-table-column label="字段名称" prop="description"></el-table-column>
            <el-table-column align="center" label="在表头显示" prop="titleShowFlag" width="210px">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.titleShowFlag" active-color="#13ce66"
                               inactive-color="#dcdfe6"></el-switch>
                </template>
            </el-table-column>
        </el-table>

js#

import Sortable from 'sortablejs' // 引入插件
mounted() {
      this.$nextTick(() => {
        this.rowDrop() // 行拖拽
      })
}
methods:{
// 行拖拽
    rowDrop () {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd ({ newIndex, oldIndex }) {
          if (newIndex === oldIndex) return
          _this.tableData.splice(newIndex, 0, _this.tableData.splice(oldIndex, 1)[0])
          var newArray = _this.tableData.slice(0)
          _this.tableData = []
          _this.$nextTick(function () {
            _this.tableData = newArray
          })
        }
      })
    }
}