el-table合并单元格

<el-table
:data="buildingData"
:span-method="buildingSpanMethod"
border
style="width: 100%"
>
<el-table-column prop="stageName" label="分期"> </el-table-column>
<el-table-column prop="alias" label="分期别名"> </el-table-column>
<el-table-column prop="prostage" label="分期阶段"> </el-table-column>
<el-table-column prop="higherBusinessType" label="一级业态">
</el-table-column>
<el-table-column prop="businessType" label="二级业态">
</el-table-column>
<el-table-column prop="buildings" label="楼栋"> </el-table-column>
<el-table-column prop="jzzdmj" label="建筑占地面积"> </el-table-column>
<el-table-column prop="zjrmj" label="计容面积"> </el-table-column>
<el-table-column prop="zksmj" label="可售面积"> </el-table-column>
<el-table-column prop="zjzmj" label="总建筑面积"> </el-table-column>
</el-table>
data() {
return {
spanStageArr:[],
stagePos:'',
spanBuildingArr:[],
buildingPos:''
};
},
props: {
buildingData: {
type: Array
},
stageData: {
type: Array
}
},
methods: {
getSpanArr(data,temp,pos) {
// data就是我们从后台拿到的数据
for (var i = 0; i < data.length; i++) {
if (i === 0) {
temp.push(1);
pos = 0;
} else {
// 判断当前元素与上一个元素是否相同
if (data[i].stageName === data[i - 1].stageName) {
temp[pos] += 1;
temp.push(0);
} else {
temp.push(1);
pos = i;
}
}
console.log(temp);
}
},
stageSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex != 3 && columnIndex != 4) {
const _row = this.spanStageArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
// [0,0] 表示这一行不显示, [2,1]表示行的合并数
rowspan: _row,
colspan: _col
};
}
},
buildingSpanMethod ({ row, column, rowIndex, columnIndex }) {
if (columnIndex != 3 && columnIndex != 4) {
const _row = this.spanBuildingArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
// [0,0] 表示这一行不显示, [2,1]表示行的合并数
rowspan: _row,
colspan: _col
};
}
}
},
mounted() {
this.getSpanArr(this.stageData,this.spanStageArr,this.stagePos);
this.getSpanArr(this.buildingData,this.spanBuildingArr,this.buildingPos);
},
watch:{
'buildingData': function() {
this.spanBuildingArr = [];
this.buildingPos = ''
this.getSpanArr(this.buildingData,this.spanBuildingArr,this.buildingPos);
},
stageData: function() {
this.spanStageArr = [];
this.stagePos = '';
this.getSpanArr(this.stageData,this.spanStageArr,this.stagePos);
}
}

 

 

 

 

posted @ 2021-01-20 09:23  你丫才美工  阅读(1525)  评论(2编辑  收藏  举报