![element-ui 中 el-table 相关操作 element-ui 中 el-table 相关操作](https://image.shishitao.com:8440/aHR0cHM6Ly9ia3FzaW1nLmlrYWZhbi5jb20vdXBsb2FkL2NoYXRncHQtcy5wbmc%2FIQ%3D%3D.png?!?w=700&webp=1)
1、带checkbox 获取所有选择的行。
this.$refs.multipleTable.selection
获取选中的单行
this.$refs.roleTable.store.states.currentRow
2、点击某行选中复选框
@row-click="rowClick"
rowClick (row) {
this.$refs.multipleTable.toggleRowSelection(row)
}
3、获取当前行序号
scope.$index
<template slot-scope="scope">
<el-button size="mini" icon="el-icon-top" @click="moveUp(scope.$index)">上移</el-button>
<el-button size="mini" icon="el-icon-bottom" @click="moveDown(scope.$index)">下移</el-button>
</template>
4、表格上移,下移
moveUp(rowIndex){
if(rowIndex == 0){
this.$message({
message:'顶行无法上移!',
type:'warning'
})
}else{
let row = this.tableData[rowIndex - 1]
this.tableData.splice(rowIndex - 1, 1)
this.tableData.splice(rowIndex,0, row)
}
},
moveDown(rowIndex){
if ((rowIndex + 1) === this.tableData.length){
this.$message({
message:'已经是最后一条,不可下移!',
type:'warning'
})
} else {
let row = this.tableData[rowIndex + 1]
this.tableData.splice(rowIndex + 1, 1)
this.tableData.splice(rowIndex,0, row)
}
}