1.安装插件:
npm install sortablejs --save
2.引入:
import Sortable from 'sortablejs'
3.表格结构:
<el-table :data="tableData" ref="multipleTable" class="multTable" row-key="id" @expand-change="expandChange">
<el-table-column prop="name" label="名称"></el-table-column>
</el-table>
4.页面使用:
export default {
data() {
return {
// 表格展开数据
expandedRows: [],
}
},
// 页面初始化,获取表格dom结构
mounted() {
this.$nextTick(() => {
this.initSortTable()
})
},
methods: {
// 表格展开事件
expandChange(row, expandedRows) {
this.expandedRows = expandedRows
// 每次点击展开的时候,只展开当前,收起之前展开的(如果项目需要同时展开多个,则去掉这个条件即可)
if (expandedRows.length > 1) {
this.$refs.multipleTable.toggleRowExpansion(this.expandedRows[0])
}
},
// 初始化拖拽表格
initSortTable() {
// 获取 tbody 节点
const elTbody = this.$refs.multipleTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
// 拖拽排序
this.tableObject = Sortable.create(elTbody, {
onEnd: evt => {
// 当表格展开时
if (this.expandedRows.length > 0) {
// 表格拖拽后,将当前展开的表格进行收起
this.$refs.multipleTable.toggleRowExpansion(this.expandedRows[0])
}
// 对拖拽后的表格重新进行排序(替换新拖拽的位置,之前数据上移)
this.tableData.splice(evt.newIndex, 0, this.tableData.splice(evt.oldIndex, 1)[0])
接口API(params).then((res) => {
this.$message.success('表格排序调整成功')
})
}
})
},
}
}
tips:
1.页面初始化就需要先加载DOM结构,
2.后面每当进行表格拖拽时,会自动触发this.initSortTable()方法,不需要额外方法。