<el-table
:show-header="false"
:data="gridData"
:span-method="addSpanMethod"
border
:cell-style="columnStyle"
style="width: 100%; margin-top: 20px"
>
<el-table-column prop="name1" align="center" width="200"></el-table-column>
<el-table-column prop="value1" align="center" width="300"></el-table-column>
<el-table-column prop="name2" align="center" width="200"></el-table-column>
<el-table-column prop="value2" align="center"></el-table-column>
</el-table>
在<el-table>的标签上,添加span-method方法
computed: {
gridData() {
return [
{
name1:"失信被执行人",
value1: this.dataTable.iname,
name2:"法定代表人",
value2: this.dataTable.businessentity
},
{
name1:"身份号码/组织机构代码",
value1: this.dataTable.cardnum,
name2: "执行法院",
value2: this.dataTable.courtname
},
{
name1:"省份",
value1: this.dataTable.areaname,
name2: "执行依据文号",
value2: this.dataTable.gistid
},
{
name1:"立案时间",
value1: this.dataTable.regdate,
name2: "案号",
value2: this.dataTable.casecode
},
{
name1:"做出执行依据单位",
value1: this.dataTable.gistunit,
name2: "发布日期",
value2: this.dataTable.publishdate
},
{
name1:"生效法律文书确定的义务",
value1: this.dataTable.duty,
},
{
name1:"被执行人的履行情况",
value1: this.dataTable.performance,
},
{
name1:"失信被执行人为具体情形",
value1: this.dataTable.disrupttypename,
}]
}
},
// 和并列
addSpanMethod({ row, column, rowIndex, columnIndex }) {
//从第几列开始合并,columnIndex就等于几(列数的索引值以0开始)
if (columnIndex === 1) {
//要合并的行数索引值
if (rowIndex === 5 || rowIndex === 6 || rowIndex === 7) {
//此处会由 横占一个单元格竖占三个单元格 合并成一个大的单元格
return {
rowspan: 1,
colspan: 3
};
} else {
//不满足条件的仍是,横竖各占一个的单元格
return {
rowspan: 1,
colspan: 1
};
}
}
}
以上的效果,如图所示