ElementUI Table组件，如何在多页数据下勾选多行

<template>
  <section>
    <el-table
      v-loading="loading"
      :data="tableData"
      size="mini"
      style=" 100%"
      stripe
      :row-key="getRowKeys"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      highlight-current-row
    >
      <el-table-column
        type="selection"
        :selectable="checkboxInit"  // 是否可以勾选
        :reserve-selection="true"   // 分页数据勾选多行
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column prop="billNo" label="单据编号" align="center">
        <template slot-scope="scope">
          <span class="fc_name" @click="goDetail(scope.row.id)">{{ scope.row.billNo }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="群组名称" align="center"></el-table-column>
      <el-table-column prop="groupSource" label="群组来源" align="center">
        <template slot-scope="scope">
          <span>{{ groupSourceObj[scope.row.groupSource] }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="groupNum" label="群组规模" align="center"></el-table-column>
      <el-table-column
        prop="validityDate"
        label="到期时间"
        :formatter="validityFormatter"
        align="center"
      ></el-table-column>
      <el-table-column prop="createTime" label="创建时间" :formatter="createFormatter" align="center"></el-table-column>
      <el-table-column prop="modifyTime" label="更新时间" :formatter="modifyFormatter" align="center"></el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          <span>{{ statusObj[scope.row.status] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="200px">
        <template slot-scope="scope">
          <div v-if="scope.row.pid ===0">
            <el-button type="text" @click="editFn(scope.row.id)">编辑</el-button>
            <el-popconfirm
              v-if="scope.row.status===0"
              title="你确定要审核吗？"
              icon="el-icon-info"
              icon-color="red"
              class="audit_button"
              @onConfirm="auditFun(scope)"
            >
              <el-button slot="reference" type="text">审核</el-button>
            </el-popconfirm>
            <!-- 1启用; 2停用' -->
            <el-popconfirm
              v-if="scope.row.status===2"
              title="你确定要启用吗？"
              icon="el-icon-info"
              icon-color="red"
              class="audit_button"
              @onConfirm="ableFun(scope)"
            >
              <el-button slot="reference" type="text">启用</el-button>
            </el-popconfirm>
            <el-popconfirm
              v-if="scope.row.status===1"
              title="你确定要停用吗？"
              icon="el-icon-info"
              icon-color="red"
              class="audit_button"
              @onConfirm="disableFun(scope)"
            >
              <el-button slot="reference" type="text">停用</el-button>
            </el-popconfirm>
            <el-popconfirm
              title="你确定要删除吗？"
              icon="el-icon-info"
              icon-color="red"
              class="delete_button"
              @onConfirm="deleteFun(scope)"
            >
              <el-button slot="reference" type="text">删除</el-button>
            </el-popconfirm>
            <el-button type="text">分析</el-button>
            <el-button type="text">复制</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>
<script>
import { dateFormatter } from '@/utils'
import {
  auditUserGroup,
  enableUserGroup,
  disableUserGroup,
  deleteUserGroup
} from '@/api/tenant'
export default {
  name: 'List',
  // 组件通讯
  props: {
    tableData: {
      default: () => []
    },
    editPage: {
      default: () => {}
    },
    loading: {
      default: false
    }
  },

  data() {
    return {
      statusObj: {
        0: '待审核',
        1: '已启用',
        2: '未启用'
      },
      groupSourceObj: {
        0: '交叉筛选',
        1: '受众上传',
        2: '受众交并',
        3: '标签筛选',
        4: '行为筛选',
        5: '模型筛选'
      }
    }
  },
  methods: {
    checkboxInit(row) {
      if (row.pid !== 0 || row.groupSource === 2) {
        return 0 // 不可勾选
      } else {
        return 1
      }
    },
    validityFormatter(row, column) {
      if (!row.validityDate) {
        return ''
      }
      return dateFormatter(row.validityDate, 1)
    },
    createFormatter(row, column) {
      if (!row.createTime) {
        return ''
      }
      return dateFormatter(row.createTime, 1)
    },
    modifyFormatter(row, column) {
      if (!row.modifyTime) {
        return ''
      }
      return dateFormatter(row.modifyTime)
    },
    // 审核
    async auditFun(scope) {
      const res = await auditUserGroup(scope.row.id)
      if (res.code === 0) {
        this.$message.success('审核成功')
        this.$emit('update')
        this.dialogVisible = false
      }
    },
    // 启用
    async ableFun(scope) {
      const res = await enableUserGroup({ id: scope.row.id })
      if (res.code === 0) {
        this.$message.success('启用成功')
        this.$emit('update')
        this.dialogVisible = false
      }
    },
    // 停用
    async disableFun(scope) {
      const res = await disableUserGroup({ id: scope.row.id })
      if (res.code === 0) {
        this.$message.success('停用成功')
        this.$emit('update')
        this.dialogVisible = false
      }
    },
    // 删除
    async deleteFun(scope) {
      const res = await deleteUserGroup(scope.row.id)
      if (res.code === 0) {
        this.$message.success('删除成功')
        this.$emit('update')
        this.dialogVisible = false
      }
    },
    getRowKeys(row) {
      return row.id
    },
    editFn(id) {
      this.$router.push({
        path: `${id}/edit`,
        query: {
          page: this.editPage.pageNum,
          size: this.editPage.pageSize
        }
      })
    },
    /**
     * 跳转到标签详情页面
     */
    goDetail(id) {
      this.$router.push({
        path: `${id}/detail`,
        query: {
          page: this.editPage.pageNum,
          size: this.editPage.pageSize
        }
      })
    }
  }
}
</script>
<style  lang='scss' scoped>
.audit_button {
  margin: 0 0px 0 10px;
}
.delete_button {
  margin: 0 10px 0;
}
</style>