antd 一批数据分别显示在多个table中

<template>
  <a-layout :style="{height:height}">
    <a-layout-sider
      :style="{overflow: 'auto',width:width,maxWidth:width,minWidth: width,height:'100%',background: '#fff'}">
      <a-menu mode="horizontal">
        <a-menu-item key="close"><a @click="closeAll" style="color:#1890FF;">
          <a-icon type="menu-unfold"/>
          折叠全部</a></a-menu-item>
      </a-menu>
      <a-tree :tree-data="treeData" @select="selNode" :expandedKeys="expandedKeys" @expand="onExpand"></a-tree>
    </a-layout-sider>
    <a-layout-content style="margin-left: 10px;">
      <a-card>
        <a-menu mode="horizontal">
          <a-menu-item key="sel"><a @click="selAll(true)" style="color:#1890FF;">
            <a-icon type="check"/>
            全选</a></a-menu-item>
          <a-menu-item key="unsel"><a @click="selAll(false)" style="color:#1890FF;">
            <a-icon type="close"/>
            清空</a></a-menu-item>
        </a-menu>
        <a-row :gutter="24">
          <a-col :span="24/tableNum" v-for="d in ds" :key="d.key">
            <a-table rowKey="id"
                     :dataSource="d.dataSource"
                     :columns="columns" :pagination="false" :loading="loading"
                     :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}">
              <span slot="serial" slot-scope="text,record,index">
                {{tableNum*(ipagination.current-1)*ipagination.pageSize
                + d.key*ipagination.pageSize
                + index+1}}
              </span>
            </a-table>
          </a-col>
        </a-row>
        <a-pagination v-model="ipagination.current"
                      :total="ipagination.total"
                      :pageSize="10*tableNum"
                      :showTotal="(total, range) => {return range[0] + '-' + range[1] + ' 共' + total + '条'}"
                      show-less-items
                      @change="pageChange"
                      style="margin-top:10px;">
        </a-pagination>
      </a-card>
    </a-layout-content>
  </a-layout>
</template>

<script>
  import { getAction, postAction } from '@/api/manage'
  import ACol from 'ant-design-vue/es/grid/Col'

  export default {
    name: 'ExamStu',
    components: { ACol },
    data() {
      return {
        id: this.$route.params.id,
        height: '',
        width: '',
        ipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        treeData: [],
        queryParam: {
          xsdqztm: '01' //只取在读状态的学生
        },
        tableNum: 3,
        ds: [],
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 80,
            align: 'center',
            scopedSlots: { customRender: 'serial' },
            fixed: 'left'
          },
          {
            title: '学号',
            align: 'center',
            dataIndex: 'xh',
            fixed: 'left'
          },
          {
            title: '姓名',
            align: 'center',
            dataIndex: 'xm',
            fixed: 'left'
          }
        ],
        loading: false,
        selectedRowKeys: [],
        expandedKeys: []
      }
    },
    created() {
      window.addEventListener('resize', this.getHeight)
      this.getHeight()
      this.getBanJiTree()
      this.listStu()
    },
    methods: {
      getHeight() {
        this.height = window.innerHeight - 60 + 'px'
        this.width = (window.innerWidth - 240) / 4 + 'px'
      },
      getBanJiTree() {
        getAction('/base/bj/getBTree').then(res => {
          this.treeData = res.result
        })
      },
      selNode(selectedKeys, info) {
        let type = info.selectedNodes[0].data.props.type
        let id = selectedKeys
        switch (type) {
          case 'xy':
            this.queryParam.yxidList = id
            break
          case 'zy':
            this.queryParam.zyid = id[0]
            break
          case 'nj':
            this.queryParam.njid = id[0]
            break
          case 'bj':
            this.queryParam.bjidList = id
            break
        }
        this.listStu(1)
      },
      listStu(arg) {
        if (arg === 1) {
          this.ipagination.current = 1
        }
        let param = Object.assign({}, this.queryParam)
        param.pageNo = this.ipagination.current
        param.pageSize = this.ipagination.pageSize * this.tableNum
        this.loading = true
        postAction('/student/list', param).then(res => {
          if (res.success) {
            this.ipagination.total = res.result.total
            let ds = res.result.records
            let index = 0
            this.ds = []
            for (let i = 0; i < this.tableNum; i++) {
              let dataSource = []
              for (let j = 0; j < this.ipagination.pageSize; j++) {
                if (ds[index]) {
                  dataSource.push(ds[index])
                  index++
                } else {
                  break
                }
              }
              this.ds.push({ key: i, selectedRowKeys: [], dataSource: dataSource })
            }

            this.queryByPc()
          } else {
            this.$message.error(res.message)
          }
          this.loading = false
        })
      },
      pageChange(page) {
        this.ipagination.current = page
        this.selectedRowKeys = []//清空选择项，避免一次向后端提交过多数据
        this.listStu()
      },
      onSelectChange(selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
        this.sub()
      },
      onExpand(expandedKeys) {
        this.expandedKeys = expandedKeys
      },
      closeAll() {
        this.expandedKeys = []
      },
      selAll(arg) {
        if (arg) {
          this.selectedRowKeys = []
          this.ds.forEach(d => {
            d.dataSource.forEach(stu => {
              this.selectedRowKeys.push(stu.id)
            })
          })
        } else {
          this.selectedRowKeys = []
        }
        this.sub()
      },
      sub() {
        let p = {
          pcId: this.id,
          xsList: this.getXsList()
        }
        postAction('/exam/examStu/addBatch', p).then(res => {
          this.$message.success(res.message)
        })
      },
      getXsList() {
        let xsList = []
        this.ds.forEach(d => {
          d.dataSource.forEach(stu => {
            let xs = { id: stu.id, value: '' }
            if (this.selectedRowKeys.indexOf(stu.id) >= 0) {
              xs.value = 'add'
            }
            xsList.push(xs)
          })
        })
        return xsList
      },
      //设置初始化选中状态
      queryByPc(){
        let p = {
          pcId: this.id,
          xsList: this.getXsList()
        }
        postAction('/exam/examStu/queryByPc',p).then(res=>{
          this.selectedRowKeys = res.result
        })
      }
    }
  }
</script>

<style scoped>

</style>

取出数据后按设置的tableNum计算份数，用a-col做为表格的容器，分页用同一个控件