el-table实现全选整表，单元一页复选框功能

<template>
  <div class="app-header">

    <el-table ref="multipleTable"
      :data="tableData.slice((pageObj.currpage - 1) * pageObj.pagesize, pageObj.currpage * pageObj.pagesize)"
      tooltip-effect="dark" style="width: 100%" :row-key="getRowKeys">
      <el-table-column width="220" align="center">
        <template v-slot:header>
          全选整表
          <el-checkbox :indeterminate="isAllIndeterminate" v-model="checkedAll" @change="allSelectFnc"></el-checkbox>
          单选一页
          <el-checkbox :indeterminate="isPageIndeterminate" v-model="checkedPage" @change="pageSelectFnc"></el-checkbox>
        </template>
        <template v-slot="scope">
          <el-checkbox v-model="scope.row.checked" @change="handleCheckedChange(scope.row)"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column type="index" width="55" label="序号" :index="hIndex">
      </el-table-column>

      <el-table-column prop="name" label="姓名" width="120">
      </el-table-column>

    </el-table>
    <el-pagination v-if="tableData.length > 0" :popper-append-to-body="false" :total="tableData.length"
      :page-size="pageObj.pagesize" :page-sizes="[10, 50, 100]" layout="total,sizes,prev, pager, next"
      @size-change="handleSizeChange" @current-change="handleCurrentChange">
    </el-pagination>
    <el-button @click="seleFnc">打印选中状态</el-button>

  </div>
</template>

<script>

export default {

  data() {
    return {
      // 选择一页表头复选框的状态
      isPageIndeterminate: false,
      // 选择一页是否选中 
      checkedPage: false,

      // 选择整表表头复选框状态
      isAllIndeterminate: false,
      // 选择整表是否选中
      checkedAll: false,

      // 表格数据 
      tableData: [{
        name: '王小虎0',
        id: '0'
      }, {

        name: '王小虎1',
        id: '58'
      }, {

        name: '王小虎2',
        id: '1'
      }, {

        name: '王小虎3',
        id: '2'
      }, {

        name: '王小虎25',
        id: '3'
      }, {

        name: '王小虎5',
        id: '4'
      }, {

        name: '王小虎6',
        id: '5'
      }, {

        name: '王小虎7',
        id: '6'
      }, {

        name: '王小虎8',
        id: '7'
      }, {

        name: '王小虎9',
        id: '8'
      }, {

        name: '王小虎10',
        id: '9'
      }, {

        name: '王小虎11',
        id: '10'
      }, {

        name: '王小虎12',
        id: '12'
      }, {

        name: '王小虎13',
        id: '13'
      }, {

        name: '王小虎14',
        id: '14'
      }, {

        name: '王小虎15',
        id: '15'
      }, {

        name: '王小虎16',
        id: '16'
      }, {

        name: '王小虎17',
        id: '17'
      }, {

        name: '王小虎19',
        id: '19'
      }, {

        name: '王小虎20',
        id: '20'
      }, {

        name: '王小虎21',
        id: '21'
      }, {

        name: '王小虎22',
        id: '22'
      }
      ],
      // 分页 
      pageObj: {
        pagesize: 10,
        currpage: 1,
        pageIndexCopy: 1,
      },
      // 是否为全选还是选择一页
      flag: false,   //false为选择全表，true为选择单页

      //存储的选中的状态
      selectsdata: [],
    }
  },


  mounted() {
  },

  methods: {
    getRowKeys(row) {
      return row.id
    },
    // 更新当前页选中状态
    updatePageCheckedState() {
      const startIndex = (this.pageObj.currpage - 1) * this.pageObj.pagesize;
      const endIndex = this.pageObj.currpage * this.pageObj.pagesize;
      const currentPageRows = this.tableData.slice(startIndex, endIndex);

      const checkedCount = currentPageRows.filter(row => row.checked).length;
      this.checkedPage = checkedCount === currentPageRows.length;
      this.isPageIndeterminate = checkedCount > 0 && checkedCount < currentPageRows.length;
    },

    // 表格第一列复选框选择
    handleCheckedChange(row) {
      if (!this.flag) {
        // 全选
        // 单行选中或取消选中

        if (row.checked) {
          this.selectsdata.push(row);
        } else {
          this.selectsdata = this.selectsdata.filter(selectedRow => selectedRow !== row);
        }
        // 检查当前页是否全选或全不选
        this.setCheckedState();
      } else {
        this.updatePageCheckedState(); // 更新当前页选中状态
      }



    },
    setCheckedState() {
      // 检查是否全部选中
      const isAllChecked = this.tableData.every(row => row.checked);
      // 检查是否全部未选中
      const isAllUnchecked = this.tableData.every(row => !row.checked);
      if (isAllChecked) {
        // 更新表头复选框状态
        this.isAllIndeterminate = false
      } else {
        this.isAllIndeterminate = true

      }

    },
    // 打印选中状态
    seleFnc() {
      console.log(this.selectsdata);
    },

    // 选择单页
    pageSelectFnc() {
      this.flag = true
      this.checkedAll = false
      // 先清除一下全选执行的选中状态
      this.tableData.forEach(row => {
        if (row.checked) {
          this.$set(row, 'checked', false);
        }
      });
      this.selectsdata = [];
      const startIndex = (this.pageObj.currpage - 1) * this.pageObj.pagesize;
      const endIndex = this.pageObj.currpage * this.pageObj.pagesize;
      const currentPageRows = this.tableData.slice(startIndex, endIndex);

      if (this.checkedPage) {
        // 选中当前页所有行
        currentPageRows.forEach(row => {
          if (!row.checked) {
            this.$set(row, 'checked', true);
            this.selectsdata.push(row);
          }
        });
      } else {
        // 取消当前页所有行的选中状态
        currentPageRows.forEach(row => {
          if (row.checked) {
            this.$set(row, 'checked', false);
            this.selectsdata = this.selectsdata.filter(selectedRow => selectedRow !== row);
          }
        });
      }
      this.isPageIndeterminate = false; // 重置中间状态


    },

    // 全选整表
    allSelectFnc() {
      this.flag = false
      this.checkedPage = false
      // 先清除一下执行的选中状态
      this.tableData.forEach(row => {
        if (row.checked) {
          this.$set(row, 'checked', false);
        }
      });
      this.selectsdata = []; // 清空单选状态
      if (this.checkedAll) {
        this.tableData.forEach(row => {
          if (!row.checked) {
            this.$set(row, 'checked', true);
            this.selectsdata.push(row);
          }
        });

      } else {
        this.tableData.forEach(row => {
          if (row.checked) {
            this.$set(row, 'checked', false);
          }
        });
        this.selectsdata = [];
        this.isAllIndeterminate = false
      }

    },
    hIndex(index) {
      // 当前页数 - 1 * 每页数据条数 + index + 1 （ index 是索引值，从0开始）
      return (this.pageObj.pageIndexCopy - 1) * this.pageObj.pagesize + index + 1
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageObj.currpage = val
      this.pageObj.pageIndexCopy = val
      if (!this.flag) {
        return
      } else {
        this.checkedAll = false
        this.selectsdata = []
        this.updatePageCheckedState(); // 更新当前页选中状态
      }


    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageObj.pagesize = val
    },
  }
}
</script>