element表格拖拽事件 vue

这是之前做过的一个需求，看了一篇文章做的，已经不记得是哪篇文章了，现在又用到了，所以记录下

1.下载包
npm install sortablejs --save
2.在页面中引入或者全局引入
import Sortable from ‘sortablejs’
3.在template中

<div id="second">
   <el-table
     class="threeTable"
     :style="{'height':tableData.length === 0 ? '100px' : 'auto'}"
     :data="tableData"
     stripe
     style="width: 100%;"
     highlight-current-row
     :header-cell-style="headerCellStyle"
   >
     <el-table-column type="index" label="序号" width="58"></el-table-column>
     <el-table-column prop="proCode" label="供方编码"></el-table-column>
     <el-table-column prop="proDesc" label="供方名称"></el-table-column>
     <el-table-column label="操作" width="80">
       <template slot-scope="scope">
       <el-tooltip class="tree-item" effect="dark" content="删除" placement="top">
         <el-button type="text" class="" @click="deleteTable(scope.row, scope.$index)"><icon-svg icon-class="iconshanchu" /></el-button>
       </el-tooltip>
       </template>
     </el-table-column>
   </el-table>
 </div>

4.在script中：

<script>
	mounted () {
		this.rowDrop() // 表格拖拽事件
	},
	methods: {
		// 行拖拽
      rowDrop () {
        const tbody = document.querySelector('#second .el-table__body-wrapper tbody')
        const _this = this
        Sortable.create(tbody, {
          onEnd ({newIndex, oldIndex}) {
            const currRow = _this.tableData.splice(oldIndex, 1)[0]
            _this.tableData.splice(newIndex, 0, currRow) // _this.tableData换成自己的表格就好了
          }
        })
      },
	}
</script>