<el-table :span-method="objectSpanMethod" :cell-style="iCellStyle" :data="tableData" height="63vh" border style="width: 100%; margin-top: 6px">
<el-table-column type="index" label="序号" width="50" align="center">
</el-table-column>
<el-table-column prop="vocs" label="VOCs组分" align="center">
</el-table-column>
<el-table-column label="源成分谱" align="center">
<template slot-scope="{row}">
<span v-if="row.type==1">化工</span>
<span v-if="row.type==2">制造业</span>
<span v-if="row.type==3">交通运输</span>
</template>
</el-table-column>
<el-table-column prop="value" label="成分浓度(ug/m3)" align="center">
</el-table-column>
<el-table-column prop="rate" label="成分浓度贡献率" align="center">
</el-table-column>
</el-table>
this.tableData=[
{
"type": "1",
"value": 8.008,
"rate": 28.241932639746075,
"vocs": "乙烷"
},
{
"type": "2",
"value": 7.862,
"rate": 27.727032269441022,
"vocs": "乙烷"
},
{
"type": "3",
"value": 12.485,
"rate": 44.03103509081291,
"vocs": "乙烷"
},
{
"type": "1",
"value": 11.184,
"rate": 39.46226315232349,
"vocs": "乙烯"
},
{
"type": "2",
"value": 12.289,
"rate": 43.361208143678766,
"vocs": "乙烯"
},
{
"type": "3",
"value": 4.868,
"rate": 17.176528703997743,
"vocs": "乙烯"
},
{
"type": "1",
"value": 7.467,
"rate": 30.569884549250798,
"vocs": "丙烷"
},
{
"type": "2",
"value": 8.686,
"rate": 35.56046835339393,
"vocs": "丙烷"
},
{
"type": "3",
"value": 8.273,
"rate": 33.869647097355276,
"vocs": "丙烷"
},
{
"type": "1",
"value": 2.832,
"rate": 11.786739917592708,
"vocs": "丙烯"
},
{
"type": "2",
"value": 8.472,
"rate": 35.260332126357845,
"vocs": "丙烯"
},
{
"type": "3",
"value": 12.723,
"rate": 52.95292795604944,
"vocs": "丙烯"
},
{
"type": "1",
"value": 8.091,
"rate": 41.29957633607268,
"vocs": "异丁烷"
},
{
"type": "2",
"value": 6.747,
"rate": 34.43928334439283,
"vocs": "异丁烷"
},
{
"type": "3",
"value": 4.753,
"rate": 24.26114031953448,
"vocs": "异丁烷"
},
{
"type": "1",
"value": 1.93,
"rate": 11.623005118940078,
"vocs": "乙炔"
},
{
"type": "2",
"value": 5.598,
"rate": 33.71273712737127,
"vocs": "乙炔"
},
{
"type": "3",
"value": 9.077,
"rate": 54.66425775368865,
"vocs": "乙炔"
},
{
"type": "1",
"value": 2.265,
"rate": 13.758124278685537,
"vocs": "正丁烷"
},
{
"type": "2",
"value": 6.344,
"rate": 38.53489643442872,
"vocs": "正丁烷"
},
{
"type": "3",
"value": 7.854,
"rate": 47.70697928688574,
"vocs": "正丁烷"
},
{
"type": "1",
"value": 4.244,
"rate": 60.99453866053464,
"vocs": "反-2-丁烯"
},
{
"type": "2",
"value": 1.362,
"rate": 19.5745903995401,
"vocs": "反-2-丁烯"
},
{
"type": "3",
"value": 1.352,
"rate": 19.430870939925267,
"vocs": "反-2-丁烯"
},
{
"type": "1",
"value": 0.236,
"rate": 3.935957304869913,
"vocs": "1-丁烯"
},
{
"type": "2",
"value": 0.634,
"rate": 10.57371581054036,
"vocs": "1-丁烯"
},
{
"type": "3",
"value": 5.126,
"rate": 85.49032688458973,
"vocs": "1-丁烯"
},
{
"type": "1",
"value": 1.772,
"rate": 37.32097725358046,
"vocs": "顺-2-丁烯"
},
{
"type": "2",
"value": 2.192,
"rate": 46.16680707666386,
"vocs": "顺-2-丁烯"
},
{
"type": "3",
"value": 0.784,
"rate": 16.512215669755687,
"vocs": "顺-2-丁烯"
}
]
this.flagValue = "";
this.flagArr = [];
this.indexAllArr = [];
this.intervalArr = [];
let indexArr = [];
this.tableData.forEach((item, index) => {
if (this.flagValue != item.vocs) {
if (!this.flagArr.includes(item.vocs)) {
this.flagArr.push(item.vocs);
this.indexAllArr.push(index);
indexArr.push(index);
} else {
this.indexAllArr.push("-");
}
}
});
indexArr.forEach((ele, eleIndex) => {
var indexNum = "";
if (indexArr[eleIndex] != indexArr[indexArr.length - 1]) {
indexNum = indexArr[eleIndex + 1] - ele;
} else {
indexNum = this.tableData.length - indexArr[eleIndex];
}
this.intervalArr.push(indexNum);
});
this.indexAllArr.forEach((item, index) => {
if (!isNaN(Number(item)) && typeof Number(item) === "number") {
} else {
this.intervalArr.splice(index, 0, "-");
}
});
objectSpanMethod({
row, column, rowIndex, columnIndex }) {
if (columnIndex === 1) {
const _row = this.indexAllArr[rowIndex];
const rowspanVal = this.intervalArr[rowIndex];
if (rowIndex == _row) {
return {
rowspan: rowspanVal,
colspan: 1,
};
}else{
return {
rowspan: 0,
colspan: 0,
};
}
}
},
iCellStyle: function ({
row, column, rowIndex, columnIndex }) {
return "height:44px !import";
},
