效果图如下
```
<template>
<div class="father">
<!-- :header-cell-style="headerStyle" -->
<div class="wdlx">网点类型</div>
<el-table
:span-method="objectSpanMethod"
:data="tableData6"
:header-cell-style="headerStyle"
border
style="width: 100%; margin-top: 20px"
>
<el-table-column align="center" width="180">
<el-table-column align="center" prop="id" width="180">
</el-table-column>
<el-table-column align="center" prop="name"> </el-table-column>
</el-table-column>
<el-table-column align="center" prop="wdsl" label="网点数量(个)">
</el-table-column>
<el-table-column align="center" label="新保">
<el-table-column align="center" prop="xbdjbd" label="新保店均保单(件)">
</el-table-column>
<el-table-column align="center" prop="xbdjbf" label="新保单均保费(万)">
</el-table-column>
</el-table-column>
<el-table-column label="转续">
<el-table-column prop="zxdj" label="转续店均(件)"> </el-table-column>
<el-table-column prop="zxdjbf" label="转续单均保费(万)">
</el-table-column>
</el-table-column>
<el-table-column prop="bf" label="保费(万)"> </el-table-column>
<el-table-column prop="ddbf" label="调度保费(万)"> </el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
// tagList:{
// 'hxd':'核心店',
// 'mbd':'目标店',
// 'ybd':'一般店'
// },
tagList: ["核心店", "目标店", "一般店"],
tableData6: [
{
id: "12987122",
name: "王已虎",
wdsl: "234",
xbdjbd: "3.2",
xbdjbf: 10,
zxdj: "王已虎",
zxdjbf: "234",
bf: "3.2",
ddbf: 10
},
{
id: "12987123",
name: "王二虎",
wdsl: "234",
xbdjbd: "3.2",
xbdjbf: 10,
zxdj: "王已虎",
zxdjbf: "234",
bf: "3.2",
ddbf: 10
},
{
id: "12987124",
name: "王三虎",
wdsl: "234",
xbdjbd: "3.2",
xbdjbf: 10,
zxdj: "王已虎",
zxdjbf: "234",
bf: "3.2",
ddbf: 10
},
{
id: "12987125",
name: "王司虎",
wdsl: "234",
xbdjbd: "3.2",
xbdjbf: 10,
zxdj: "王已虎",
zxdjbf: "234",
bf: "3.2",
ddbf: 10
},
{
id: "12987126",
name: "王吴虎",
wdsl: "234",
xbdjbd: "3.2",
xbdjbf: 10,
zxdj: "王已虎",
zxdjbf: "234",
bf: "3.2",
ddbf: 10
},
{
id: "12987122",
name: "王留虎",
wdsl: "234",
xbdjbd: "3.2",
xbdjbf: 10,
zxdj: "王已虎",
zxdjbf: "234",
bf: "3.2",
ddbf: 10
},
{
id: "12987123",
name: "王期虎",
wdsl: "234",
xbdjbd: "3.2",
xbdjbf: 10,
zxdj: "王已虎",
zxdjbf: "234",
bf: "3.2",
ddbf: 10
},
{
id: "12987124",
name: "王吧虎",
wdsl: "234",
xbdjbd: "3.2",
xbdjbf: 10,
zxdj: "王已虎",
zxdjbf: "234",
bf: "3.2",
ddbf: 10
},
{
id: "12987125",
name: "王就虎",
wdsl: "234",
xbdjbd: "3.2",
xbdjbf: 10,
zxdj: "王已虎",
zxdjbf: "234",
bf: "3.2",
ddbf: 10
},
{
id: "12987126",
name: "王小虎",
wdsl: "234",
xbdjbd: "3.2",
xbdjbf: 10,
zxdj: "王已虎",
zxdjbf: "234",
bf: "3.2",
ddbf: 10
}
]
};
},
created() {},
mounted() {},
methods: {
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex == 0) {
return [3, 1];
} else if (rowIndex >= 3) {
return [1, 2];
} else {
return [0, 0];
}
} else if (columnIndex == 1) {
// 第二列的大于3行的清除，避免影响样式
if (rowIndex >= 3) {
return [0, 0];
}
}
},
headerStyle({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 1) {
return {
// display: "none",
background: "#D9E8FF",
color: "222222",
height: "38px"
};
} else {
return { background: "#D9E8FF", color: "222222", height: "38px" };
}
},
}
};
</script>
<style lang="less" scoped>
/deep/ thead tr:nth-child(1) th:nth-child(1) {
border-bottom: 0;
}
/deep/ thead tr:nth-child(2) th:nth-child(1) {
border-right: 0;
}
.father {
position: relative;
}
.wdlx {
position: absolute;
top: 7%;
left: 11%;
z-index: 999;
}
</style>
```
