1、行排序
HTML
<el-table-column label="排序" width="80">
<template slot-scope="scope">
<el-button class="operatBtn" size="mini" icon="el-icon-top"
:disabled="scope.$index===0"
@click="moveUp(scope.$index,scope.row)">
</el-button>
<el-button class="operatBtn" size="mini" icon="el-icon-bottom"
:disabled="scope.$index===(tabList.length-1)"
@click="moveDown(scope.$index,scope.row)">
</el-button>
</template>
</el-table-column>
JS
//向上移动
moveUp(index,row) {
let that = this;
if (index > 0) {
let upDate = that.tabList[index - 1];
that.tabList.splice(index - 1, 1);
that.tabList.splice(index,0, upDate);
} else {
alert('已经是第一条,不可上移');
}
},
//向下移动
moveDown(index,row){
let that = this;
if ((index + 1) === that.tabList.length){
alert('已经是最后一条,不可下移');
} else {
let downDate = that.tabList[index + 1];
that.tabList.splice(index + 1, 1);
that.tabList.splice(index,0, downDate);
}
},
效果图
2、拖拽排序
mounted() {
this.rowDrop();
}
//行拖拽
rowDrop() {
const tbody = document.querySelector('.el-table__body-wrapper tbody')
const _this = this
Sortable.create(tbody, {
onEnd({ newIndex, oldIndex }) {
const currRow = _this.tabList.splice(oldIndex, 1)[0]
_this.tabList.splice(newIndex, 0, currRow)
}
})
},