Vue中table实现行的上移和下移
最上方的行不可以再向上移动:所以向上的按钮禁用,同理最下面的一行也是html代码:<el-table-column label="操作" align="center" width="250px" fixed="right"><template slot-scope="scope">..
·
最上方的行不可以再向上移动:所以向上的按钮禁用,同理最下面的一行也是
html代码:
<el-table-column label="操作" align="center" width="250px" fixed="right">
<template slot-scope="scope">
<el-button class="operatBtn" size="mini" icon="el-icon-bottom"
:disabled="scope.$index===(tableData.length-1)"
@click="moveDown(scope.$index,scope.row)">
</el-button>
<el-button class="operatBtn" size="mini" icon="el-icon-top"
:disabled="scope.$index===0"
@click="moveUp(scope.$index,scope.row)">
</el-button>
</template>
</el-table-column>
主要代码:
//向上移动
moveUp(index,row) {
var that = this;
console.log('上移',index,row);
console.log(that.tableData[index]);
if (index > 0) {
let upDate = that.tableData[index - 1];
that.tableData.splice(index - 1, 1);
that.tableData.splice(index,0, upDate);
} else {
alert('已经是第一条,不可上移');
}
},
//向下移动
moveDown(index,row){
var that = this;
console.log('下移',index,row);
if ((index + 1) === that.tableData.length){
alert('已经是最后一条,不可下移');
} else {
console.log(index);
let downDate = that.tableData[index + 1];
that.tableData.splice(index + 1, 1);
that.tableData.splice(index,0, downDate);
}
},
更多推荐
已为社区贡献15条内容
所有评论(0)