Element-ui中的table相关操作

1、点击表格第一个复选框全选所有行：

事件“select-all”：

<template>  
 <el-table
      :data="tableData"
      ref="multipleTable"
      style="width: 100%"
      @select-all="selectAllHandle"
    >
  </el-table>
</template>

<script>
    methods: {
        selectAllHandle(selection) {
          console.log("selectAllHandle");
          console.log(selection);
        }
    }
</script>

2、点击表格第一个复选框取消全选所有行：

3、点击按钮获取表格中所有数据：

4、点击按钮获取表格中所有选择的行：

<el-button
  type="primary"
  icon="el-icon-finished"
  size="mini"
  @click="getSelection()"
>获取选择行</el-button>

<el-table
      :data="tableData"
      ref="multipleTable"
      style="width: 100%"
    >
</el-table>

getSelection() {
   let selection = this.$refs.multipleTable.selection;
   console.log(selection);
}

5、选择某一行时获取该行数据：

事件：select

5、点击某一行时获取该行数据：

事件：row-click

6、取消所有选择：

方法：clearSelection()

this.$refs.multipleTable.clearSelection();

 

 

、