el-table当页选择和全选整套完整逻辑

1、html

绑定两个事件@selection-all和@select

<el-table ref="listTable" :data="data.list" @selection-all="selectionChangeFn" @select="selectFn">
        <el-table-column type="selection" width="55" />
</el-table>

2、当页选择和全选事件

<el-checkbox v-model="checkPage" @change="checkPageFn">当页</el-checkbox>
<el-checkbox v-model="checkAllPage" @change="checkAllPageFn">全选</el-checkbox>

3、执行方法

单页或者单个就获取的是列表中的id，使用ids存储，全选则传checkAllPage为true即可

    // 当页        
    checkPageFn(val) {
      this.ids = []
      if (val) {this.checkAllPage = false}
      this.data.list.forEach(row => {
        this.$refs.listTable.toggleRowSelection(row, val)
        if (val) {
          this.ids.push(row.id)
        }
      })
    },
    // 全选
    checkAllPageFn(val) {
      if (val) {this.checkPage = false}
      this.data.list.forEach(row => {
        this.$refs.listTable.toggleRowSelection(row, val)
      })
    },
    selectionAllFn(val) {
      this.ids = val.map(v => v.id);
      this.checkPage = val.length > 0;
      this.checkAllPage = false;
    },
    selectFn(val) {
      this.ids = val.map(v => v.id);
      this.checkPage = false
      this.checkAllPage = false
    },

4、提交校验

submit(){
   if (this.ids?.length<1 && !this.checkAllPage ) {
     return this.$message.error('请选择需要导出的数据')
   }
}