首页 > 技术文章 > element-ui 中 el-table 相关操作

ckmouse 2019-10-24 15:45 原文

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

  

推荐阅读