表格合并需要在表格上添加:span-method=""属性
html部分
<el-table key="tableDataFour" :data="tableDataFour"
:header-cell-style="{background: '#e7ebf6',color:'green'}"
:show-header="false" // 不显示表格头部
:span-method="objectSpanMethodFour" //表格合并
border>
<el-table-column align="center" label="列数1" min-width="100" prop="pf">
<template slot-scope="{row}">
<span>{{ row.pf }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="列数2" min-width="200" prop="mx">
<template slot-scope="{row}">
<span>{{ row.mx }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="列数3" min-width="200" prop="bz">
<template slot-scope="{row}">
<span>{{ row.bz }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="列数4" min-width="200" prop="qz">
<template slot-scope="{row}">
<span>{{ row.qz }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="金额" min-width="200" prop="row.mz">
<template slot-scope="{row}">
<el-input v-model="row.mz" :autosize="true" min="0"
oninput="if(value.length>10)value=value.slice(0,11)" placeholder="单位（元）"
type="number">
</el-input>
</template>
</el-table-column>
</el-table>vue部分
tableDataFour: [
{
pf: '类型：xx号',
mx: '成本',
bz: '综合xx',
qz: '测算xx',
mz: '',
vz: '绑定的动态字段',
},
{
pf: '类型：xx号',
mx: '成本',
bz: '综合xx',
qz: '高端人才xx费',
mz: '',
vz: '绑定的动态字段',
},
{
pf: '类型：xx号',
mx: '成本',
bz: '直接xx成本',
qz: 'xx费',
mz: '',
vz: '绑定的动态字段',
},
{
pf: '类型：xx号',
mx: '成本',
bz: '直接xx成本',
qz: 'xx费',
mz: '',
vz: '绑定的动态字段',
},
{
pf: '类型：xx号',
mx: '成本',
bz: '直接xx成本',
qz: 'xx费',
mz: '',
vz: '绑定的动态字段',
},
{
pf: '类型：xx号',
mx: '成本',
bz: '直接xx成本',
qz: '专家xx费',
mz: '',
vz: '绑定的动态字段',
},
{
pf: '类型：xx号',
mx: '成本',
bz: '专用xx费',
qz: '',
mz: '',
vz: '绑定的动态字段',
},
{
pf: '类型：xx号',
mx: '成本',
bz: '第三方xx费',
qz: '测评xx费',
mz: '',
vz: '绑定的动态字段',
},
{
pf: '类型：xx号',
mx: '成本',
bz: '第三方xx费',
qz: '单独计xx列',
mz: '',
vz: '绑定的动态字段',
},
{
pf: '类型：xx号',
mx: '税金',
bz: '',
qz: '',
mz: '',
vz: '绑定的动态字段',
},
{
pf: '类型：xx号',
mx: '利润',
bz: '',
qz: '',
mz: '',
vz: '绑定的动态字段',
},
],
methods(){
//vue官方：
//通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
//个人理解：表格合并的本质是把一个个单元格, 其中的某行某列的单元格拉伸，占据其他单元格位置，剩余单元格需隐藏掉。
objectSpanMethodFour({row, column, rowIndex, columnIndex}) {
// 合并表格的第一列 把表格第一列合并成一个单元格 其他单元格隐藏
if (columnIndex == 0) {// columnIndex 表格列数 开始下标为0
if (rowIndex == 0) { // rowIndex 表格当前列数的第一行 开始下标为0
return {// 合并成1列
rowspan: 11, // 准备要合并的列数 开始下标为1
colspan: 1 // 准备要合并的行数 开始下标为1
}
} else {
// rowspan，colspan 为0时 隐藏当前单元格
// rowspan，colspan 为1时 显示当前单元格
return {
rowspan: 0,
colspan: 0
}
}
}
if (columnIndex == 1) {
if (rowIndex == 0) {
return {
rowspan: 9,
colspan: 1
}
} else if (rowIndex == 9 || rowIndex == 10) {
return {
rowspan: 1,// 合并3行
colspan: 3
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
if (columnIndex == 2) {
if (rowIndex == 0) {
return {
rowspan: 2,
colspan: 1
}
} else if (rowIndex == 2) {
return {
rowspan: 4,
colspan: 1
}
} else if (rowIndex == 6) {
return {
rowspan: 1,
colspan: 2
}
} else if (rowIndex == 7) {
return {
rowspan: 2,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
if (columnIndex == 3) {
if (rowIndex == 6 || rowIndex == 9 || rowIndex == 10) {
return {
rowspan: 0,
colspan: 0
}
} else {
return {
rowspan: 1, // rowspan，colspan 为1时 显示当前单元格
colspan: 1
}
}
}
},
}
