javascript
复制代码
<el-table :data="statisticsChexkboxs" border max-height="300px" width="740px" row-key="id"
ref="projectTable">
<el-table-column v-for="item in confirmHead" :key="item.label" :label="item.label" :prop="item.prop"
:width="item.width" align="center" show-overflow-tooltip>
<el-table-column label="操作" fixed="right" width="200" align="center">
<template slot-scope="scope">
<el-link type="info" icon="el-icon-top" style="margin-right: 8px" :underline="false"
@click="handleUp(scope.row, scope.$index)">上移
<el-divider direction="vertical"></el-divider>
</el-link>
<el-link type="info" icon="el-icon-bottom" style="margin-right: 8px" :underline="false"
@click="handleDown(scope.row, scope.$index)">下移
</el-link>
</template>
</el-table-column>
</el-table>
//在需要编写排序的页面引入sortablejs依赖
import Sortable from 'sortablejs';
data() {
return {
sortable: null,
orderSort: false,
data: [],
}
}
methods:{
// 上移
handleUp(item, index) {
this.statisticsChexkboxs.splice(index - 1, 0, item);
this.statisticsChexkboxs.splice(index + 1, 1);
this.handleOrderTable(this.statisticsChexkboxs)
},
// 下移
handleDown(item, index) {
this.statisticsChexkboxs.splice(index + 2, 0, item);
this.statisticsChexkboxs.splice(index, 1);
this.handleOrderTable(this.statisticsChexkboxs)
},
//拖拽行
setSort() {
this.$nextTick(() => {
//projectTable需要上面表格ref一致
const el = this.$refs.projectTable.$el.querySelectorAll(
'.el-table__body-wrapper > table > tbody'
)[0];
this.sortable = Sortable.create(el, {
animation: 150,
setData: function (dataTransfer) {
dataTransfer.setData('Text', '');
},
// 监听拖拽事件结束时触发
onEnd: evt => {
// 拖动行的前一行
const targetRow = this.statisticsChexkboxs.splice(evt.oldIndex, 1)[0];
// 拖动行的后一行
this.statisticsChexkboxs.splice(evt.newIndex, 0, targetRow);
this.handleOrderTable(this.statisticsChexkboxs)
}
});
})
},
//保存表格顺序
handleOrderTable(value) {
let vaueData = value.map((item) => {
return {
detailId: item.id,
shipOrder: item.shipOrder,
};
});
dxjTransportAdjustShipOrder(vaueData).then((res) => {
const { code, msg } = res.data
const title = code === 200 ? '操作成功' : '操作失败'
const type = code === 200 ? 'success' : 'error'
this.$notification(title, type, msg)
})
},
}
// 我这个是在弹筐里写的 $refs.获取不到可以写这个里 正常情况放mounted调用就行
updated() {
this.setSort()
},
