element ui 表格合并行和列
<el-table
:data="tableData"
:span-method="arraySpanMethod"
border
style="width: 100%"
>
<el-table-column
v-for="col in columns"
:prop="col.dataIndex"
:key="col.dataIndex"
:label="col.title"
align="center"
></el-table-column>
</el-table>
methods: {
// 合并行或列
arraySpanMethod({ row, rowIndex, columnIndex }) {
// 合并的列（成一整行）
if (row.colSpanRow) {
if (rowIndex === rowIndex) { // 哪一行需要合并
if (columnIndex === 1) { // 第二列的值保留
return [1, 19]
} else { // 其余隐藏
return [0, 0]
}
}
} else {
// 第一列和第二列
if (columnIndex === 1 || columnIndex === 0) {
if (row.objIndex === 'col0') {
// 合并的行
return {
rowspan: row.num,
colspan: 1
}
} else {
// 其余被合并子项隐藏
return {
rowspan: 0,
colspan: 0
}
}
}
}
}
}
|
