1、效果图
3.png
2、实现代码
<template>
<div :key="menuKey">
<el-table
:data="tableData6"
style="width: 100%"
border
:loading="loading"
:span-method="cellMerge"
:key="Math.random()"
>
<el-table-column label="所属单位" prop="departmentName" :key="Math.random()">
</el-table-column>
<el-table-column label="场所" prop="stationName" :key="Math.random()"></el-table-column>
<el-table-column label="区域类型" prop="categoryName" :key="Math.random()">
</el-table-column>
<el-table-column label="区域名称" prop="locationName" :key="Math.random()">
</el-table-column>
<el-table-column label="区域面积（㎡）" prop="dimension" :key="Math.random()">
</el-table-column>
<el-table-column label="器材类型" prop="eqTypeName" :key="Math.random()">
</el-table-column>
<el-table-column label="规格名称" prop="eqSpecName" :key="Math.random()">
</el-table-column>
<el-table-column label="配置数量" prop="number" :key="Math.random()">
</el-table-column>
<el-table-column label="消防通道数量" prop="fireEscapeNum" :key="Math.random()"></el-table-column>
<el-table-column label="摄像头数量" prop="cameraNum" :key="Math.random()"></el-table-column>
<el-table-column label="保安数量" prop="securityGuardNum" :key="Math.random()"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data () {
return {
tableData:[],
spanOneArr:[],
spanTwoArr:[],
spanThreeArr:[],
spanFourArr:[],
spanFiveArr:[],
spanSixArr:[],
}
}
//强制刷新table
watch:{
tableData6(){
++this.menuKey
console.log(this.menuKey)
}
},
methods: {
getSpanArr(tableData) {
let concatOne = 0,
concatTwo = 0,
concatThree = 0,
concatFour = 0,
concatFive = 0,
concatSix = 0;
this.spanOneArr = [],
this.spanTwoArr = [],
this.spanThreeArr=[],
this.spanFourArr=[],
this.spanFiveArr=[],
this.spanSixArr=[];
tableData.forEach((item,index)=>{
if(index === 0){
this.spanOneArr.push(1);
this.spanTwoArr.push(1);
this.spanThreeArr.push(1);
this.spanFourArr.push(1);
this.spanFiveArr.push(1);
this.spanSixArr.push(1);
}else{
if(item.departmentName === tableData[index - 1].departmentName){ //第一列需合并相同内容的判断条件
this.spanOneArr[concatOne] += 1;
this.spanOneArr.push(0);
}else{
this.spanOneArr.push(1);
concatOne = index;
};
if(item.stationName === tableData[index - 1].stationName){//第二列合并相同内容
this.spanTwoArr[concatTwo] += 1;
this.spanTwoArr.push(0);
}else{
this.spanTwoArr.push(1);
concatTwo = index;
};
if(item.categoryName === tableData[index - 1].categoryName){//第三列合并相同内容
this.spanThreeArr[concatThree] += 1;
this.spanThreeArr.push(0);
}else{
this.spanThreeArr.push(1);
concatThree = index;
};
if(item.locationName === tableData[index - 1].locationName){
this.spanFourArr[concatFour] += 1;
this.spanFourArr.push(0);
}else{
this.spanFourArr.push(1);
concatFour = index;
};
if(item.dimension === tableData[index - 1].dimension){
this.spanFiveArr[concatFive] += 1;
this.spanFiveArr.push(0);
}else{
this.spanFiveArr.push(1);
concatFive = index;
};
if(item.eqTypeName === tableData[index - 1].eqTypeName){
this.spanSixArr[concatSix] += 1;
this.spanSixArr.push(0);
}else{
this.spanSixArr.push(1);
concatSix = index;
};
}
});
},
cellMerge({ row, column, rowIndex, columnIndex }) {
if(columnIndex === 0 ) {
const _row = this.spanOneArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
if(columnIndex === 1) {
const _row = this.spanTwoArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
if(columnIndex === 2) {
const _row = this.spanThreeArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
if(columnIndex === 3) {
const _row = this.spanFourArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
if(columnIndex === 4) {
const _row = this.spanFiveArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
if(columnIndex === 5) {
const _row = this.spanSixArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
},
}
}
数据结构
{"data":{"pageNum":1,"pageSize":10,"published":true,"records":[{"cameraNum":0,"categoryId":"c94576043751a0583591a40cfd3cef80","categoryName":"其他","chargeEmpCode":"002360","chargeEmpName":"臧传森","departmentId":"06edcd0f5dba3f857aaec85c010de67b","departmentName":"梅林车队","dimension":75.0,"eqSpecName":"悬挂式干粉自动灭火器6KG","eqTypeName":"灭火器","fireEscapeNum":0,"locationId":"09c61e318e7a11e99d80fa163e66dc10","locationName":"办公区","number":1,"securityGuardNum":0,"stationId":"ec6ed4e08e7611e99d80fa163e66dc10","stationName":"下梅林总站"},{"cameraNum":0,"categoryId":"c94576043751a0583591a40cfd3cef80","categoryName":"其他","chargeEmpCode":"002360","chargeEmpName":"臧传森","departmentId":"06edcd0f5dba3f857aaec85c010de67b","departmentName":"梅林车队","dimension":75.0,"eqSpecName":"手提式干粉灭火器4KG","eqTypeName":"灭火器","fireEscapeNum":0,"locationId":"09c61e318e7a11e99d80fa163e66dc10","locationName":"办公区","number":2,"securityGuardNum":0,"stationId":"ec6ed4e08e7611e99d80fa163e66dc10","stationName":"下梅林总站"},{"cameraNum":1,"categoryId":"18f2ac7cf3393cb68dc0323732ee6b2d","categoryName":"充电站","chargeEmpCode":"002360","chargeEmpName":"臧传森","departmentId":"06edcd0f5dba3f857aaec85c010de67b","departmentName":"梅林车队","dimension":20.0,"eqSpecName":"消防栓（不带柜体）","eqTypeName":"消防栓","fireEscapeNum":1,"locationId":"0acb63ad00d44460b0a92e29ba0f0f88","locationName":"测试","number":200,"securityGuardNum":1,"stationId":"ec6ed4e08e7611e99d80fa163e66dc10","stationName":"下梅林总站"},{"cameraNum":1,"categoryId":"18f2ac7cf3393cb68dc0323732ee6b2d","categoryName":"充电站","chargeEmpCode":"002360","chargeEmpName":"臧传森","departmentId":"06edcd0f5dba3f857aaec85c010de67b","departmentName":"梅林车队","dimension":20.0,"eqSpecName":"消防栓（带柜体）","eqTypeName":"消防栓","fireEscapeNum":1,"locationId":"0acb63ad00d44460b0a92e29ba0f0f88","locationName":"测试","number":200,"securityGuardNum":1,"stationId":"ec6ed4e08e7611e99d80fa163e66dc10","stationName":"下梅林总站"},{"cameraNum":1,"categoryId":"18f2ac7cf3393cb68dc0323732ee6b2d","categoryName":"充电站","chargeEmpCode":"002360","chargeEmpName":"臧传森","departmentId":"06edcd0f5dba3f857aaec85c010de67b","departmentName":"梅林车队","dimension":20.0,"eqSpecName":"悬挂式干粉自动灭火器6KG","eqTypeName":"灭火器","fireEscapeNum":1,"locationId":"0acb63ad00d44460b0a92e29ba0f0f88","locationName":"测试","number":1,"securityGuardNum":1,"stationId":"ec6ed4e08e7611e99d80fa163e66dc10","stationName":"下梅林总站"},{"cameraNum":1,"categoryId":"18f2ac7cf3393cb68dc0323732ee6b2d","categoryName":"充电站","chargeEmpCode":"002360","chargeEmpName":"臧传森","departmentId":"06edcd0f5dba3f857aaec85c010de67b","departmentName":"梅林车队","dimension":20.0,"eqSpecName":"推车式干粉灭火器30KG","eqTypeName":"灭火器","fireEscapeNum":1,"locationId":"0acb63ad00d44460b0a92e29ba0f0f88","locationName":"测试","number":199,"securityGuardNum":1,"stationId":"ec6ed4e08e7611e99d80fa163e66dc10","stationName":"下梅林总站"}],"total":6,"totalPageNum":1},"msg":"ok","seq":"8068e87f16cd62c80c00000001007","status":200,"time":1566961336600}
3、参考链接或延升阅读
element-UI表格table实现表格行的动态合并
vue+elementUI表格列显示隐藏遇到bug
vue 强制组件重新渲染（重置)
延升阅读--element动态合并行和列
element-ui table :span-method（行合并）
vue2.0数据更新，重新渲染视图的三种方法
