bash
复制代码
<template>
<div>
<el-table :data="tableData" style="width: 100%" :span-method="objectSpanMethod">
<el-table-column align="center" label="" prop="bigCategoryName" fixed></el-table-column>
<el-table-column align="center" label="" prop="smallCategoryName" fixed></el-table-column>
<el-table-column v-for="header in tableHeaders" align="center" :key="header.key" :prop="header.key"
:label="header.label">
<el-table-column v-show="header.children" v-for="child in header.children" align="center" :key="child.key"
:prop="child.key" :label="child.label">
<el-table-column v-show="child.children" v-for="child2 in child.newChildren" align="center"
:label="child2.propName" :key="child2.key" :prop="child2.prop"></el-table-column>
</el-table-column>
</el-table-column>
<el-table-column align="center" label="">
<el-table-column align="center" label="累计">
<el-table-column align="center" label="本日" prop="todayTotal" ></el-table-column>
<el-table-column align="center" label="比率/出率" prop="rateTotal" ></el-table-column>
<el-table-column align="center" label="月累计" prop="monthTotalTotal"></el-table-column>
<el-table-column align="center" label="月比率/出率" prop="monthRateTotal" ></el-table-column>
</el-table-column>
<el-table-column align="center" label="上月比率/出率" prop="lastMonthRateTotal" width="100px"></el-table-column>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'table_test',
data() {
return {
tableHeaders: [
{
"label": "孔令召",
"children": [
{
"label": "白班",
"newChildren": [
{
"prop": "todayShift",
"propName": "本日",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "rateShift",
"propName": "比率/出率",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "monthTotalShift",
"propName": "月累计",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "monthRateShift",
"propName": "月比率/月出率",
"propDescribtion": null,
"hasSort": false
}
]
}
]
},
{
"label": "杨晓超",
"children": [
{
"label": "中班",
"newChildren": [
{
"prop": "todayMiddle",
"propName": "本日",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "rateMiddle",
"propName": "比率/出率",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "monthTotalMiddle",
"propName": "月累计",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "monthRateMiddle",
"propName": "月比率/月出率",
"propDescribtion": null,
"hasSort": false
}
]
}
]
},
{
"label": "王文强",
"children": [
{
"label": "夜班",
"newChildren": [
{
"prop": "todayNight",
"propName": "本日",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "rateNight",
"propName": "比率/出率",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "monthTotalNight",
"propName": "月累计",
"propDescribtion": null,
"hasSort": false
},
{
"prop": "monthRateNight",
"propName": "月比率/月出率",
"propDescribtion": null,
"hasSort": false
}
]
}
]
}
],
tableData: [
{
"bigCategoryName": "原料",
"smallCategoryName": "投料量",
"todayShift": 30340,
"rateShift": 2150.0,
"monthTotalShift": 45270.0,
"monthRateShift": 2160.0,
"todayMiddle": 32670,
"rateMiddle": 2170.0,
"monthTotalMiddle": 67550.0,
"monthRateMiddle": 2170.0,
"todayNight": 31700,
"rateNight": 2190.0,
"monthTotalNight": 67880.0,
"monthRateNight": 2180.0,
"todayTotal": 94710,
"rateTotal": 2170.75,
"monthTotalTotal": 180700,
"monthRateTotal": 2170.05,
"lastMonthRateTotal": 107.35
},
{
"bigCategoryName": "辅料投入",
"smallCategoryName": "辅料1",
"todayShift": 70,
"rateShift": 0.0,
"monthTotalShift": 140.0,
"monthRateShift": 0.01,
"todayMiddle": 70,
"rateMiddle": 0.0,
"monthTotalMiddle": 140.0,
"monthRateMiddle": 0.0,
"todayNight": 70,
"rateNight": 0.0,
"monthTotalNight": 140.0,
"monthRateNight": 0.0,
"todayTotal": 210,
"rateTotal": 4.81,
"monthTotalTotal": 420,
"monthRateTotal": 5.04,
"lastMonthRateTotal": 144.27
},
{
"bigCategoryName": "辅料投入",
"smallCategoryName": "辅料2",
"todayShift": 30,
"rateShift": 0.0,
"monthTotalShift": 60.0,
"monthRateShift": 0.0,
"todayMiddle": 30,
"rateMiddle": 0.0,
"monthTotalMiddle": 60.0,
"monthRateMiddle": 0.0,
"todayNight": 30,
"rateNight": 0.0,
"monthTotalNight": 60.0,
"monthRateNight": 0.0,
"todayTotal": 90,
"rateTotal": 2.06,
"monthTotalTotal": 180,
"monthRateTotal": 2.16,
"lastMonthRateTotal": 92.56
},
{
"bigCategoryName": "辅料投入",
"smallCategoryName": "辅料3",
"todayShift": 2182.4,
"rateShift": 160.0,
"monthTotalShift": 3242.6,
"monthRateShift": 0.16,
"todayMiddle": 2335.85,
"rateMiddle": 160.0,
"monthTotalMiddle": 4817.4,
"monthRateMiddle": 0.15,
"todayNight": 2244.4,
"rateNight": 160.0,
"monthTotalNight": 4832.9,
"monthRateNight": 0.16,
"todayTotal": 6762.65,
"rateTotal": 155,
"monthTotalTotal": 12892.90,
"monthRateTotal": 154.83,
"lastMonthRateTotal": 126.1
}
]
}
},
mounted() {
this.gettableList()
},
methods: {
// 整体表格PC端合并列
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
let that = this;
// 因为日期在第一项，从0开始判断columnIndex === 0合并第一列
if (columnIndex === 0) {
// 当前行值及日期值为：bigCategoryName
let idName = that.tableData[rowIndex].bigCategoryName;
// rowIndex是行索引，判定第二行是不是和前面一行的日期值相同
if (rowIndex > 0) {
if (that.tableData[rowIndex].bigCategoryName != that.tableData[rowIndex - 1].bigCategoryName) {
let i = rowIndex;
let num = 0;
// 遍历
while (i < that.tableData.length) {
if (that.tableData[i].bigCategoryName === idName) {
i++;
num++;
} else {
i = that.tableData.length;
}
}
return {
// 这里返回的num就是有相同的行数
rowspan: num,
// 合并几列,实例中只是跨行合并,不跨列合并,所以用的1
colspan: 1,
}
} else {
return {
rowspan: 0,
colspan: 1,
}
}
} else {
let i = rowIndex;
let num = 0;
while (i < that.tableData.length) {
if (that.tableData[i].bigCategoryName === idName) {
i++;
num++;
} else {
i = that.tableData.length;
}
}
return {
rowspan: num,
colspan: 1,
}
}
}
},
gettableList(){
let data={
date:this.time,
}
productionProcessPC(data).then((response) => {
this.tableData=response.data.list
this.tableHeaders=response.data.tableHeaders
})
},
};
</script>
<style lang='' scoped>
</style>
