<el-table :data="tableData" border :span-method="objectSpanMethod">
<el-table-column prop="province" label="省" width="auto" align="center"></el-table-column>
<el-table-column prop="city" label="市" width="auto" align="center"></el-table-column>
<el-table-column prop="area" label="县(区)" width="auto" align="center"></el-table-column>
<el-table-column prop="sealedArea" label="管控区域" width="240" align="center">
<template #default="{row}">
<span>{{row.status===1?'(封控区)':row.status===2?'(管控区)':'(防范区)'{{row.sealedArea}}
</span>
</template>
</el-table-column>
<el-table-column prop="centralizedIsolation" label="居家观察" align="center"></el-table-column>
<el-table-column prop="homeQuarantine" label="日常监测" align="center"></el-table-column>
<el-table-column prop="dailyMonitoring" label="日常监测" align="center"></el-table-column>
<el-table-column prop="fortyEight" label="48小时内核酸阴性证明" align="center"></el-table-column>
<el-table-column prop="retroactiveDate" label="追溯日期" align="center"></el-table-column>
<el-table-column label="操作" fixed="right" width="180" align="center">
<template v-slot="scope">
<el-button type="text" size="small">修改</el-button>
<el-button type="text" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
tableData: [
{
province: "浙江省",
city: "杭州市",
area: '余杭区',
sealedArea: '良渚街道:顾家埠121-122号。',
centralizedIsolation: '14天',
homeQuarantine: '7天',
dailyMonitoring: '',
fortyEight: '',
retroactiveDate: '4月20日',
status:1
},
{
province: "浙江省",
city: "杭州市",
area: '余杭区',
sealedArea: '良渚街道:顾家埠115-120、123-136号。',
centralizedIsolation: '',
homeQuarantine: '3天',
dailyMonitoring: '11天',
fortyEight: '',
retroactiveDate: '4月20日',
status:2
},
{
province: "浙江省",
city: "杭州市",
area: '余杭区',
sealedArea: '良渚街道:顾家埠小区除封控区、管控区以外的区域。',
centralizedIsolation: '',
homeQuarantine: '3天',
dailyMonitoring: '11天',
fortyEight: '',
retroactiveDate: '4月20日',
status:3
},
{
province: "浙江省",
city: "杭州市",
area: '上城区',
sealedArea: '笕桥街道钱塘白石嘉苑16幢,笕桥街道黄家社区一区1-2号',
centralizedIsolation: '14天',
homeQuarantine: '7天',
dailyMonitoring: '',
fortyEight: '',
retroactiveDate: '4月20日',
status:1
},
{
province: "浙江省",
city: "杭州市",
area: '上城区',
sealedArea: '黄家社区一区、二区(除封控区外),仁爱路-九沙大道-杭乔路-金禾街-九睦路-九乔街合围区域(除封控区外),九堡街道鑫运时代金座15幢。九堡街道金雅苑2幢234单元和13.4幢。',
centralizedIsolation: '',
homeQuarantine: '3天',
dailyMonitoring: '11天',
fortyEight: '',
retroactiveDate: '4月20日',
status:2
},
{
province: "浙江省",
city: "杭州市",
area: '上城区',
sealedArea: '东湖高架路-德胜东路-和睦港-钱塘快速路合围区域(除封控、管控区):九堡街道鑫运时代金座234幢:金雅苑小区(除封控、管控区外)',
centralizedIsolation: '',
homeQuarantine: '3天',
dailyMonitoring: '11天',
fortyEight: '',
retroactiveDate: '4月20日',
status:3
},
{
province: "浙江省",
city: "杭州市",
area: '拱墅区',
sealedArea: '封控区笕桥街道钱塘白石嘉苑16幢',
centralizedIsolation: '14天',
homeQuarantine: '7天',
dailyMonitoring: '',
fortyEight: '',
retroactiveDate: '4月20日',
status:1
},
],
initData() {
for (var i = 0; i < this.tableData.length; i++) {
if (i === 0) {
this.spanArr.push(1);
this.pos = 0;
this.cityArr.push(1);
this.cityPos = 0;
this.areaArr.push(1);
this.areaPos = 0;
} else {
if (this.tableData[i].province === this.tableData[i - 1].province) {
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
}else{
this.spanArr.push(1);
this.pos = i;
}
if (this.tableData[i].city=== this.tableData[i - 1].city) {
this.cityArr[this.cityPos] += 1;
this.cityArr.push(0);
}else{
this.cityArr.push(1);
this.cityPos = i;
}
if (this.tableData[i].area=== this.tableData[i - 1].area) {
this.areaArr[this.areaPos] += 1;
this.areaArr.push(0);
}else{
this.areaArr.push(1);
this.areaPos = i;
}
}
}
console.log(this.cityArr,'cityArr')
},
objectSpanMethod({row, column, rowIndex, columnIndex}) {
if (columnIndex ===0) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
else if (columnIndex ===1) {
const _row = this.cityArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
else if (columnIndex ===2) {
const _row = this.areaArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
},