element-ui 中 el-table 相关操作

时间:2023-03-10 01:13:45
element-ui  中  el-table  相关操作

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)
}
}