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

您所在的位置:网站首页 pagesizeoptions antd 一批数据分别显示在多个table中

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

2023-03-23 12:17| 来源: 网络整理| 查看: 265

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241                                         折叠全部                                                                     全选                                   清空                                                                     {{tableNum*(ipagination.current-1)*ipagination.pageSize                 + d.key*ipagination.pageSize                 + index+1}}                                                                           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         })       }     }   }

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3