1、安装 sortablejs
npm i sortablejs --save
2、再要使用的引入,或者全局引入也可以,但是我是在使用的地方引入的
import Sortable from 'sortablejs'
3、直接看代码吧
<template>
<div>
<el-table :data="tableData" border id="crTable" row-key="id">
<el-table-column prop="name" label="名字"></el-table-column>
<el-table-column prop="sex" label="性别" ></el-table-column>
<el-table-column prop="addr" label="地址" ></el-table-column>
<el-table-column prop="phon" label="电话" ></el-table-column>
<el-table-column prop="remark" label="备注" ></el-table-column>
</el-table>
</div>
</template>
<script>
import Sortable from 'sortablejs'
export default {
name: "test",
data() {
return {
tableData: [],
}
},
mounted() {
this.rowDrop()
}
methods: {
//行拖拽
rowDrop() {
const tbody = document.getElementById("crTable").querySelector('.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)
}
})
},
//列拖拽
// columnDrop() {
// const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
// this.sortable = Sortable.create(wrapperTr, {
// animation: 180,
// delay: 0,
// onEnd: evt => {
// const oldItem = this.dropCol[evt.oldIndex]
// this.dropCol.splice(evt.oldIndex, 1)
// this.dropCol.splice(evt.newIndex, 0, oldItem)
// }
// })
// },
},
}
</script>