<template> <a-card :bordered="false"> <!-- table区域-begin --> <a-table ref="table" size="default" bordered rowKey="id" :columns="columns" :pagination="false" :dataSource="dataSource"> </a-table> <!-- table区域-end --> </a-card> </template> <script> export default { name: "RowspanTable", components: { }, data() { return { description: '存放位置设置表管理页面', levelNum:{}, gridNum:0, boxNum:0, cabinetNo:"", // 表头 columns: [ { title: '分组一', align: "center", dataIndex: 'cabinetNo', customRender: (value, row, index) => { const obj = { children: value, attrs: {}, }; if(index===0){ obj.attrs.rowSpan = this.dataSource.length; }else{ obj.attrs.rowSpan = 0; } return obj; }, }, { title: '分组二', align: "center", dataIndex: 'levelNo', customRender: (value, row, index) => { const obj = { children: value, attrs: {}, }; //当前列跨行的条数 var a = parseInt(this.levelNum); var b = parseInt(this.gridNum)*parseInt(this.boxNum); console.log(a); for(var c=0;c<=a;c++){ if(index === (c*b)){ console.log(1); console.log(c*b); obj.attrs.rowSpan = b; break; }else{ obj.attrs.rowSpan = 0; } } return obj; } }, { title: '分组三', align: "center", dataIndex: 'gridNo', customRender: (value, row, index) => { const obj = { children: value, attrs: {}, }; var a = parseInt(this.levelNum)*parseInt(this.gridNum); var b = parseInt(this.boxNum); for(var c=0;c<=a;c++){ if(index === (c*b)){ obj.attrs.rowSpan = b; break; }else{ obj.attrs.rowSpan = 0; } } return obj; }, }, { title: '字段一', align: "center", dataIndex: 'boxNo' }, { title: '字段二', align: 'center', dataIndex: 'storedNum' }, { title: '字段三', align: "center", dataIndex: 'maxNum' },], //数据集 dataSource: [{ "id": "cb1dfd12cbeca3f8ba121439ee7e2411", "attributeId": "e62831f314e1390edbd884e9d9e6aca6", "cabinetNo": "1", "levelNo": "1", "gridNo": "1", "boxNo": "1", "storedNum": 2, "maxNum": 2, "unitNum": 2, "assignStatus": "1", "storageStatus": "1", "remark": null, "createBy": "admin", "createTime": "2019-04-02", "updateBy": "admin", "updateTime": "2019-04-02" }, { "id": "f903d50d02904b14175dccf2a7948777", "attributeId": "e62831f314e1390edbd884e9d9e6aca6", "cabinetNo": "1", "levelNo": "1", "gridNo": "1", "boxNo": "2", "storedNum": 2, "maxNum": 2, "unitNum": 2, "assignStatus": "1", "storageStatus": "1", "remark": null, "createBy": "admin", "createTime": "2019-04-02", "updateBy": "admin", "updateTime": "2019-04-02" }, { "id": "4f04c0ca4202535d678871b07e706cf6", "attributeId": "e62831f314e1390edbd884e9d9e6aca6", "cabinetNo": "1", "levelNo": "1", "gridNo": "2", "boxNo": "1", "storedNum": 2, "maxNum": 2, "unitNum": 2, "assignStatus": "1", "storageStatus": "1", "remark": null, "createBy": "admin", "createTime": "2019-04-02", "updateBy": "admin", "updateTime": "2019-04-02" }, { "id": "d0c91dabedfc03efad0126e50ea72e80", "attributeId": "e62831f314e1390edbd884e9d9e6aca6", "cabinetNo": "1", "levelNo": "1", "gridNo": "2", "boxNo": "2", "storedNum": 2, "maxNum": 2, "unitNum": 2, "assignStatus": "1", "storageStatus": "1", "remark": null, "createBy": "admin", "createTime": "2019-04-02", "updateBy": "admin", "updateTime": "2019-04-08" }, { "id": "1e8bfcbe4352afbab8878f9fd368e007", "attributeId": "e62831f314e1390edbd884e9d9e6aca6", "cabinetNo": "1", "levelNo": "2", "gridNo": "1", "boxNo": "1", "storedNum": 1, "maxNum": 2, "unitNum": 1, "assignStatus": "1", "storageStatus": "0", "remark": null, "createBy": "admin", "createTime": "2019-04-02", "updateBy": "admin", "updateTime": "2019-04-08" }, { "id": "d76087d8d3ebc7a59d43458588f26941", "attributeId": "e62831f314e1390edbd884e9d9e6aca6", "cabinetNo": "1", "levelNo": "2", "gridNo": "1", "boxNo": "2", "storedNum": 0, "maxNum": 2, "unitNum": 0, "assignStatus": "1", "storageStatus": "0", "remark": null, "createBy": "admin", "createTime": "2019-04-02", "updateBy": "admin", "updateTime": "2019-04-02" }, { "id": "7bf7754f12e1bf95edcd501cc6b85e62", "attributeId": "e62831f314e1390edbd884e9d9e6aca6", "cabinetNo": "1", "levelNo": "2", "gridNo": "2", "boxNo": "1", "storedNum": 0, "maxNum": 2, "unitNum": 0, "assignStatus": "1", "storageStatus": "0", "remark": null, "createBy": "admin", "createTime": "2019-04-02", "updateBy": "admin", "updateTime": "2019-04-02" }, { "id": "9cd08d733657d5b286bec870f12f6ecf", "attributeId": "e62831f314e1390edbd884e9d9e6aca6", "cabinetNo": "1", "levelNo": "2", "gridNo": "2", "boxNo": "2", "storedNum": 0, "maxNum": 2, "unitNum": 0, "assignStatus": "1", "storageStatus": "0", "remark": null, "createBy": "admin", "createTime": "2019-04-02", "updateBy": "admin", "updateTime": "2019-04-02" }], isorter: { column: 'createTime', order: 'desc', }, url: { }, } }, created() { this.loadData(); }, methods: { loadData(){ this.levelNum=4; this.gridNum = 2; this.boxNum = 2; } } } </script> <style scoped> .ant-card-body .table-operator{ margin-bottom: 18px; } .ant-table-tbody .ant-table-row td{ padding-top:15px; padding-bottom:15px; } .anty-row-operator button{margin: 0 5px} .ant-btn-danger{background-color: #ffffff} .ant-modal-cust-warp{height: 100%} .ant-modal-cust-warp .ant-modal-body{height:calc(100% - 110px) !important;overflow-y: auto} .ant-modal-cust-warp .ant-modal-content{height:90% !important;overflow-y: hidden} </style>