这是之前做过的一个需求,看了一篇文章做的,已经不记得是哪篇文章了,现在又用到了,所以记录下
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>