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