Files
base/jero-web/src/views/demo/RowspanTable.vue
T

283 lines
6.9 KiB
Java

<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: {}
}
// 当前列跨行的条数
const a = parseInt(this.levelNum)
const b = parseInt(this.gridNum) * parseInt(this.boxNum)
console.log(a)
for (let 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: {}
}
const a = parseInt(this.levelNum) * parseInt(this.gridNum)
const b = parseInt(this.boxNum)
for (let 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: 4px;
}
.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>