elementui table合并单元格
数据
mergerow:0,
col:0,
detailDataList:[
{
ad_master: '广告主1',
ad_img: '广告图1',
ad_sum: 1,
active_status: '投放情况1',
cover_sum: '覆盖人数1',
budget: '预算1',
country: '覆盖地区1',
age: '受众年龄1',
sex: '受众性别1',
day: '投放天数1',
}, {
ad_master: '广告主1',
ad_img: '广告图1',
ad_sum: 1,
active_status: '投放情况1',
cover_sum: '覆盖人数1',
budget: '预算1',
country: '覆盖地区1',
age: '受众年龄1',
sex: '受众性别1',
day: '投放天数1',
},
{
ad_master: '广告主1',
ad_img: '广告图1',
ad_sum: 1,
active_status: '投放情况1',
cover_sum: '覆盖人数1',
budget: '预算1',
country: '覆盖地区1',
age: '受众年龄1',
sex: '受众性别1',
day: '投放天数1',
},
{
ad_master: '广告主3',
ad_img: '广告图3',
ad_sum: 1,
active_status: '投放情况3',
cover_sum: '覆盖人数3',
budget: '预算3',
country: '覆盖地区3',
age: '受众年龄3',
sex: '受众性别3',
day: '投放天数3',
}
],
函数
//合并单元
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// columnIndex 判断你要合并的列是哪几个
if ((columnIndex === 0 || columnIndex === 2 )&&rowIndex<this.detailDataList.length-1) {
if ( this.col==2){
if (this.mergerow>2){
// 2个列除2
this.mergerow=this.mergerow-1;
return {
rowspan: 0,
colspan: 0,
};
}else {
this.col=0
}
}
// 如果是第一列（广告主）且当前行的广告主和上一行的广告主相同，则合并
if (columnIndex === 0&& rowIndex >= 0 ) {
let count=1;
for (let i = rowIndex+1; i <this.detailDataList.length ; i++) {
if (this.detailDataList[i].ad_master==row.ad_master){
count++
}
}
this.mergerow=count
this.col=this.col+1
return {
rowspan: count,
colspan: 1,
};
// 第二行合并
}else if (columnIndex === 2&&rowIndex >= 0 ){
let count=1;
for (let i = rowIndex+1; i <this.detailDataList.length ; i++) {
if (this.detailDataList[i].ad_master==row.ad_master){
count++
}
}
this.mergerow+=count
this.col=this.col+1
return {
rowspan: count,
colspan: 1,
};
}
}
},
前端
<el-table
:data="detailDataList"
border
tooltip-effect="dark"
style="width:100%;margin-top: 10px"
:span-method="objectSpanMethod"
>
<el-table-column prop="ad_master" label="广告主" min-width="90">el-table-column>
<el-table-column prop="ad_img" label="广告图/视频" min-width="90">
<template slot-scope="scope">
{{scope.row.countryName}}
template>
el-table-column>
<el-table-column prop="ad_sum" label="扩组情况" min-width="90">el-table-column>
<el-table-column prop="active_status" label="投放情况" min-width="90">el-table-column>
<el-table-column prop="cover_sum" label="覆盖人数" min-width="90">
el-table-column>
<el-table-column prop="budget" label="预算" min-width="90">
el-table-column>
<el-table-column prop="country" label="覆盖地区" min-width="90">
el-table-column>
<el-table-column prop="age" label="受众年龄" min-width="90">el-table-column>
<el-table-column prop="sex" label="受众性别" min-width="90">el-table-column>
<el-table-column prop="day" label="投放天数" min-width="90">el-table-column>
<el-table-column label="操作" min-width="140">
<template slot-scope="scope">
<el-link :underline="false" type="primary" @click="search(scope.row)" ><i class="el-icon-picture">i> 以图搜图el-link><br>
<el-link :underline="false" type="primary" @click="toGoodPool(scope.row)" ><i class="el-icon-circle-plus">i> 加入评估池el-link>
template>
el-table-column>
el-table>