一、全选所有的情况下
1.在表格最上方手写一个 多选框用于做全选所有的操作;
2.表格中的row-key和reserve-selection配合使用，使表格的 “选择状态具有记忆性”
3.selection-change表示表格的 “选择状态发生改变时” 触发的事件
4.select表示手动操作 选择或不选择某一个数据 触发的函数
5.data中checkList数组可以用于当不是 全选所有状态下的 个别选择项
6.data中selectOff数组可以用于当是 全选所有状态下的 个别 未选择项

           <el-checkbox v-model="allCheck" @change="allCheckEvent" style="margin-right:15px">全选所有</el-checkbox>
          <el-table
            ref="tableData"
            v-loading="loading"
            :data="tableData"
            height="920px"
            border
            style="width: 80%;margin:0 auto"
            @selection-change="handleSelectionChange"
            @select="select"
            :row-key="(row)=>{return row.id}"
          >
            <el-table-column
              type="selection"
              width="120"
              label-class-name="DisabledSelection"
              :reserve-selection="true"
            ></el-table-column>

export default{
data(){
return{
      allCheck: false, //全部选择框的选择与否
      checkList: [], //被选择的,
      selectOff: [] //不被选择的
      }
},
methods:{

//1.选择所有 的函数
    
    allCheckEvent() {
      // 1.1当选择所有 选项框状态为 √ 时
      if (this.allCheck) {
        // 1.1.1遍历当前展示的数组，使所有的多选框为 √ 选择状态
        this.tableData.forEach(row => {
          this.$refs.tableData.toggleRowSelection(row, true);
        });
        // 1.2当选择所有 选项框状态为 空 时
      } else {
        // 1.2.1遍历当前展示的数组，使所有的多选框为 未 选择状态
        this.$refs.tableData.clearSelection();
      }
    },
    
//2.当选择项发生变化时会触发该事件
    
    handleSelectionChange(val) {
      this.checkList = val;
    },
    
//3.当用户手动勾选数据行的 Checkbox 时触发的事件
    
    select(selection, row) {
      if (this.allCheck) {
        let selected = selection.length && selection.indexOf(row) !== -1; //为true时选中，为 0 时（false）未选中
        // 当手动操作为未选中状态时
        if (!selected) {
          // 将未选中的数据放在一个变量里
          this.selectOff.push(row);
          // 当再次手动操作为选中状态的时候
        } else {
          // 为了使再次选中后，将未选择数组中的该数据删除掉，遍历未选择的数组 和当前操作打√的数据比较，如果不同的就过滤留下，相同的就去除。
          this.selectOff = this.selectOff.filter(
            // 如果item.score不等于row.score就留下
            item => item.id !== row.id
          );
        }
      }else{
        this.selectOff=[]
      }
    },
    
//4.取消选择所有数据（当查询条件改变时，调用该函数来清空已选择数据，并且将 选择所有的 选项框的状态重置）
    
    cancelSelection() {
      this.$refs.tableData.clearSelection();
      this.allCheck = false;
    },
},
watch:{
//监听渲染列表数组的变化，一旦变化 执行相关函数，使全选状态下，每一页按照全选显示
    tableData: {
      handler(value) {
        if (this.allCheck) {
          let that = this;
          let len = that.checkList.length;
          let lenOff = that.selectOff.length;
          value.forEach(row => {
            // 遍历新请求回来的当页数据，和已经选择的数组中所有对象对比，如果有相同的，说明已经选择了，不再选择，其他没有选择的设置为选中状态
            for (let i = 0; i < len; i++) {
              if (row.id === that.checkList[i].id) {
                that.$refs.tableData.toggleRowSelection(row, false);
                break;
              } else {
                that.$refs.tableData.toggleRowSelection(row, true);
              }
            }
            // 循环遍历新的请求回来的当页数据，和手动未选择的数组对比，如果有相同的，将其样式显示为未选择状态
            for (let i = 0; i < lenOff; i++) {
              if (row.id === that.selectOff[i].id) {
                that.$refs.tableData.toggleRowSelection(row, false);
              }
            }
          });
        }
      },
      deep: true
    }
}
}