<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>