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)
}
})
}
}