sortable.js文档:
我的使用:
注意事项:
el-table一定要添加 row-key否则拖拽不生效!!
class="dragTableBtn"指定拖拽柄
el-table-column如果加了fixed,拖拽会失效,因为不能正确地拿到拖拽柄
<el-table ref="boardListTable" row-key="id">
<el-table-column type="index"> </el-table-column>
<!-- <el-table-column label="序号" min-width="40" show-overflow-tooltip align="center">
<template slot-scope="scope">
<span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column> -->
<el-table-column prop="createName" label="创建人" min-width="80" show-overflow-tooltip align="center" />
<el-table-column label="操作" width="180" align="center">
<template slot-scope="{ row }">
<el-button type="text" size="small" class="dragTableBtn" >拖动</el-button>
</template>
</el-table-column>
</el-table>
//拖动table的单行
setSort() {
//拿到el-table
const boardListTable = this.$refs.boardListTable;
//获取到el-table表头下方的tbody表格元素
const el = boardListTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];
this.sortable = Sortable.create(el, {
//项被拖拽的过程中跟随它的那个影子的样式
ghostClass: "dragTableBtn",
//指定拖拽柄才能拖拽动父元素
handle: ".dragTableBtn",
//拖拽结束事件
onEnd: evt => {
// 获取到新位置的行数据
const newRow = JSON.parse(JSON.stringify(this.tableData[evt.newIndex]));
// 删除旧位置的行数据,并获取到旧位置的行数据
const oldRow = this.tableData.splice(evt.oldIndex, 1)[0];
// oldRow插入到tableData的新位置evt.newIndex之前
this.tableData.splice(evt.newIndex, 0, oldRow);
this.isLoading = true;
//将项的id和拖拽到目标项的id(newId)传给后端,后端修改sort字段的序号,数据持久化
callWithErrorMsg(
changeScheduleSort,
{
newId: newRow.id,
id: oldRow.id
},
() => {
this.isLoading = false;
}
);
}
});
},