业务场景:有时候需要前端实现上移和下移功能
代码如下:
根据交互形式,我这里是把第一条数据的上移按钮置灰不可点击::disabled="scope.$index == 0";最后一条数据下移按钮置灰不可点击::disabled="(scope.$index + 1) == tableData.length"。
<template>
<el-table
:data="tableData">
<el-table-column type="index" label="序号" width="60"></el-table-column>
<el-table-column label="名称" prop="name"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="text" style="padding:0" :disabled="scope.$index == 0" @click="moveUpward(scope.row, scope.$index)">上移</el-button>
<el-button type="text" style="padding:0" :disabled="(scope.$index + 1) == tableData.length" @click="moveDown(scope.row, scope.$index)">下移</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
tableData: [
{id: 1, name: '小明001'},
{id: 2, name: '小红001'},
{id: 3, name: '小强001'},
{id: 4, name: '小刚001'},
{id: 5, name: '小白001'},
{id: 6, name: '小花001'}
]
},
methods: {
moveUpward(row, index) {
if (index > 0) {
let upData = this.tableData[index - 1];
this.tableData.splice(index - 1, 1);
this.tableData.splice(index, 0, upData);
} else {
this.$message({
message: '已经是第一条,上移失败',
type: 'warning'
});
}
},
moveDown(row, index) {
if ((index + 1) == this.tableData.length) {
this.$message({
message: '已经是最后一条,下移失败',
type: 'warning'
});
} else {
let downData = this.tableData[index + 1];
this.tableData.splice(index + 1, 1);
this.tableData.splice(index, 0, downData);
}
}
}
}
</script>