（超简单+详细注释）Vue2+Element-ui 实现表格的全选和反选功能.

直接开始看总体代码：

<template>
<div>
    <!-- 表格 -->
    <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%;"
    @selection-change="handleSelectionChange" 
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column label="日期" width="120" prop="date"></el-table-column>
    <el-table-column prop="name" label="姓名" width="120"></el-table-column>
    <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
  </el-table>
  <!-- 表格 -->
  <div style="margin-top: 20px;">
    <el-checkbox v-model="checked" @change="allchange(tableData)"> 全选 </el-checkbox>
  </div>
</div>
</template>

<script>
export default {
  data: function () {
    return {
      checked: false, //定义的全选状态，默认为false
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
      ],
      multipleSelection: [],
    }
  },
  methods: {
    //********全选部分*********// 
    allchange(tableData) { //全选 （*tableData参数为点击全选按钮时传入的表格数据tableData*）      
      if (this.checked) { //如果全选框被选中checked变为true时执行开始进行全选操作        
        this.$refs.multipleTable.clearSelection() //全选前先清空选中的数据 (*在全选之前一定要先清除一下*)
        tableData.forEach((item) => {
          this.$refs.multipleTable.toggleRowSelection(item) //官方提供的全选方法,使用时我们需要通过循环来传入每个item进行选中
        })
      } else {
        this.$refs.multipleTable.clearSelection() //官方取消全选的方法
      }
    },
    //********单选和反选部分*********// 
    handleSelectionChange(val) {  //表格前面的复选框选中方法 （*val值就是选中的表格的数据*）
      this.multipleSelection = val  //我们会在data中定义一个multipleSelection：[]用来存储选中的val
      if (this.multipleSelection.length != this.tableData.length) {  //如果选中的个数!=表格总数据的长度length,那么我们就让全选按钮的复选框变成false
        this.checked = false
      } else {  //反之如果选中的个数==表格总数据的长度length,那么我们就让全选按钮的复选框变成true
        this.checked = true
      }
    }
  },
}
</script>

效果如下：

1.全选效果图：

2.反选效果图

到这里就结束喽，希望能帮助到不明白的小伙伴！感谢大家观看！！！