170 lines
3.0 KiB
Vue
170 lines
3.0 KiB
Vue
<!--
|
|
* @Author: zwq
|
|
* @Date: 2024-05-15 16:18:19
|
|
* @LastEditors: zwq
|
|
* @LastEditTime: 2024-05-16 09:57:13
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<div class="app-container">
|
|
<el-table
|
|
:data="tableData"
|
|
:header-cell-style="{
|
|
background: '#F2F4F9',
|
|
color: '#606266',
|
|
}"
|
|
border
|
|
:cell-style="cellStyle"
|
|
:span-method="objectSpanMethod"
|
|
empty-text="暂无数据"
|
|
style="width: 100%"
|
|
ref="dataList">
|
|
<el-table-column type="index" fixed="left" label="#" align="center" />
|
|
<el-table-column prop="name" label="仓库名"></el-table-column>
|
|
<el-table-column prop="code" label="仓库编码"></el-table-column>
|
|
<el-table-column
|
|
v-for="item in columns"
|
|
:key="item.label"
|
|
align="center"
|
|
:label="item.label">
|
|
<el-table-column
|
|
v-for="it in item.children"
|
|
:key="it.prop"
|
|
:prop="it.prop"
|
|
align="center"
|
|
header-align="left"
|
|
:label="it.label">
|
|
<template slot-scope="scope">
|
|
{{ scope.row[it.prop] }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
tableData: [
|
|
{
|
|
name: 1,
|
|
code: '1',
|
|
prop1: '1',
|
|
prop2: '2',
|
|
prop3: '3',
|
|
prop4: '4',
|
|
prop5: '5',
|
|
prop6: '6',
|
|
span: [2, 4],
|
|
},
|
|
{
|
|
name: 2,
|
|
code: '2',
|
|
prop1: '7',
|
|
prop2: '8',
|
|
prop3: '9',
|
|
prop4: '10',
|
|
prop5: '11',
|
|
prop6: '12',
|
|
span: [1, 5],
|
|
},
|
|
],
|
|
columns: [
|
|
{
|
|
label: '2023/1',
|
|
children: [
|
|
{
|
|
label: '1',
|
|
prop: 'prop1',
|
|
},
|
|
{
|
|
label: '15',
|
|
prop: 'prop2',
|
|
},
|
|
{
|
|
label: '30',
|
|
prop: 'prop3',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: '2023/2',
|
|
children: [
|
|
{
|
|
label: '1',
|
|
prop: 'prop4',
|
|
},
|
|
{
|
|
label: '15',
|
|
prop: 'prop5',
|
|
},
|
|
{
|
|
label: '30',
|
|
prop: 'prop6',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
color: [
|
|
'#5470c6',
|
|
'#91cc75',
|
|
'#fac858',
|
|
'#ee6666',
|
|
'#73c0de',
|
|
'#3ba272',
|
|
'#fc8452',
|
|
'#9a60b4',
|
|
'#ea7ccc',
|
|
],
|
|
};
|
|
},
|
|
components: {},
|
|
created() {},
|
|
methods: {
|
|
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
|
let i = 0;
|
|
if (columnIndex === 3) {
|
|
return [1, row.span[0]];
|
|
} else if (columnIndex === 3 + row.span[i]) {
|
|
i += 1;
|
|
return [1, row.span[i]];
|
|
} else if (columnIndex > 3) {
|
|
return [0, 0];
|
|
}
|
|
},
|
|
cellStyle({ row, column, rowIndex, columnIndex }) {
|
|
let i = 0;
|
|
if (columnIndex === 3) {
|
|
return {
|
|
color: 'white',
|
|
borderRadius: '15px',
|
|
background: this.color[0],
|
|
};
|
|
} else if (columnIndex === 3 + row.span[i]) {
|
|
i += 1;
|
|
return {
|
|
color: 'white',
|
|
borderRadius: '15px',
|
|
background: i < 9 ? this.color[i] : 'none',
|
|
};
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
.app-container .el-table .el-table__cell {
|
|
padding: 0;
|
|
height: 35px;
|
|
}
|
|
.el-table .warning-row {
|
|
background: oldlace;
|
|
}
|
|
|
|
.el-table .success-row {
|
|
background: #f0f9eb;
|
|
}
|
|
</style>
|