<!-- 全局组件 --><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()外面去执行；