vue2使用sortablejs实现el-table的行拖拽
<!-- 全局组件 -->
<gl-dialog :title="dialogTitle" ref="dialog" top="2vh" :destroy-on-close="true" :visible.sync="visible" width="92%" @close="closeDialog">
<!-- 全局组件-->
<gl-table
v-if="visible"
height="750px"
row-key="id"
:ref="tableKey"
:loading="loading"
:column="filterColumns"
:table-data="dataList"
:total="dataCount"
:show-total="false"
:display-label="displayLabel"
:sortChange="sortChange"
:hidePagination="true"
@pagination="handlePagination">
<el-table-column label="操作" width="60" fixed="right" align="center" v-if="isEmptyData&&handleType==='edit'">
<template slot-scope="{row}">
<el-button size="mini" type="text" @click.stop="dialogHandle(row)">修改</el-button>
</template>
</el-table-column>
</gl-table>
js部分
setSort() {
const table = this.$refs[this.tableKey].$refs.multipleTable;
// 获取el-table的tbody的dom节点
const el = table.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];
this.sortable = Sortable.create(el, {
ghostClass: 'sortable-ghost',
onEnd: evt => {
const targetRow = this.dataList.splice(evt.oldIndex, 1)[0];
// this.dataList是table的数据,通过splice进行替换,从而达到数据更新目的
this.dataList.splice(evt.newIndex, 0, targetRow);
this.$nextTick(() => {
table.doLayout();
})
}
})
},
css部分
.sortable-ghost { //setSort中绑定的class
opacity: .8;
color: #fff!important;
background: #00BBB3!important;
}
::v-deep .editTable .el-table__body:hover {
cursor: move;
}
注意事项:
- 使用el-table进行行的拖拽的时候,一定需要使用属性row-key,这个需要进行diff;
- 拖拽之后,表格如果有错位,可以调用el-table自带的方法 doLayout进行更新布局,这个最好是放在this.$nextTick()里面去执行;
转载自:https://segmentfault.com/a/1190000042398957