【表格拖拽功能】

vue+elementUI+sortablejs 实现表格拖拽功能

示例

1.安装插件

npm install sortablejs --save

2.引入

import Sortable from 'sortablejs'

3.html表格结构（要绑定唯一的值row-key，不然会出错）

 <el-table
          ref="editTable"
          :data="tableData"
          height="300"
          border
          row-key="id"
          style="width: 100%"
          highlight-current-row
          @selection-change="selectionChange"
          @row-click="rowClick"
        >
          <el-table-column
            type="selection"
            width="50"
            align="center"
          />
          <el-table-column
            prop="proOpCode"
            label="工序号"
            :width="editPart? 70 : 90"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="proOpName"
            label="工序名称"
            min-width="120"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="工序类型"
            align="center"
            :min-width="130"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="站位"
            align="center"
            min-width="180"
          >
          </el-table-column>
        </el-table>```
4.js代码

```javascript
import Sortable from 'sortablejs'
export default {
 name: 'RoutePage',
 data() {
    return{
      tableData: [],

    }
  },
   mounted() {
    this.dragSort()
  },
   methods: {
    dragSort() {
      const el = this.$refs.editTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost',
        setData: function(dataTransfer) {
          dataTransfer.setData('Text', '')
        },
        onEnd: e => {
          const targetRow = this.tableData.splice(e.oldIndex, 1)[0]
          this.tableData.splice(e.newIndex, 0, targetRow)
        }
      })
    }
  }