vue2表格分页并且每行有复选框，如何实现所有页面全选复选框被选中回显

一、如何实现表格的列有复选框，并且表头复选框后有文字

• 给表格每行加复选框,在需要加复选框的列上加type="selection"

<el-row :gutter="10" class="mb8">
	<el-col :span="1.5">
		<el-button type="primary" plain icon="el-icon-upload2” size="mini" @click="exportSelectedExcel">导出</el-button>
		<el-checkbox -model="al1Check” @change="al1CheckEvent”style="margin-left:10px;">全选所有</el-checkbox》
	</el-col>
	<right-toolbar :showSearch.sync="showSearch" @queryTable="getPagelist"></right-toolbar>
</el-row>
<el-checkbox v-model="allCheck" @change="allCheckEvent">全选所有</el-checkbox>
 <el-table
    ref="table"
    :data="tableData"
    tooltip-effect="dark"
   :row-key="rowKey"
    @selection-change="handleSelectionChange">
    <el-table-column
     type="selection" 
     :reserve-selection="true"
     :selectable="checkSelectable"
     width="55"></el-table-column>
    <el-table-column  label="机构" width="120"> </el-table-column>
   ...
  </el-table>
  ...
  

• 想在表头复选框后加文字，用css就可以实现

::v-deep .el-table__header-wrapper .el-checkbox__input::after{
	content:全选;
	position: absolute;
	margin-left: 5px;
}

二、点击全选所有，分页的都要回显被选中

给el-table加@selection-change="handleSelectionChange",给有复选框的那一列加:reserve-selection="true" :selectable="checkSelectable"
方法如下：

export default {
  data () {
    return {
   	  tableData:[]
      idList: [],//所有选中的数据包含跨分页数据
      allCheck: false,
      rowKey(row) {
      	//唯一字段名称
      	return row.id
      }
    }
  },
  created(){
     //获取初始表格数据
  },
  methods: {
	  ...
   	 // 分页全选-选中框改变事件
    handleSelectionChange (val) {
      // 数据去重
      this.idList = this.reduceSame(val);
      // 选中所有选择框时勾选全选按钮
      if (this.idList.length == this.total) {
        this.allCheck = true;
      }
      // 将row是对象数组数据转换为字符串
      this.idList= this.idList.map(function (val) {
        return val.id;
      });
      // 选中后的数据,将选中的id放在一个数组传给后端
      console.log(this.idList)
    },
	// 数组对象去重
    reduceSame: function (arr) {
      let obj = {};
      return arr.reduce(function (prev, item) {
        obj[item.id] ? "" : (obj[item.id] = 1 && prev.push(item))
        return prev
          ;
      }, []);
    },
 	// 分页全选-全选按钮change事件
    allCheckEvent () {
      let _this = this;
      if (_this.allCheck) {
        // 全选选中时当前页所有数据选中
        _this.lists.forEach(row => {
          if (row) {
            _this.$refs.table.toggleRowSelection(row, true);
          }
        });
      } else {
        _this.$refs.table.clearSelection();
      }
    },
 	// 分页全选-全选时禁用选择框
    checkSelectable (row, index) {
      return !this.allCheck;
    },
   },
  watch: {
    // 分页全选-监听数据变化
    tableData: {
      handler (value) {
        if (this.allCheck) {
          this.tableData.forEach(row => {
            if (row) {
              this.$refs.table.toggleRowSelection(row, true)
            }
          });
        }
      },
      deep: true
    }
  },
  
 }