elementUI中表格单元格合并
<template>
<div class="app-container home">
<el-card class="box-card">
<el-table :data="tableData" :span-method="objectSpanMethod" border>
<el-table-column prop="id" label="ID" width="180" align="center"></el-table-column>
<el-table-column prop="name" label="姓名" align="center"></el-table-column>
<el-table-column prop="amount" label="数值" align="center"></el-table-column>
<el-table-column label="操作" fixed="right" width="180" align="center">
<template slot-scope="scope">
<el-button type="text" size="small" >修改</el-button>
<el-button type="text" size="small" >删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<script>
export default {
name: "tableRow",
data() {
return {
rowspan: [],
tableData: [
{
id: 1,
name: "name-111",
data: [{ amount: 100 }, { amount: 200 }, { amount: 300 }]
},
{ id: 2, name: "name-222", data: [{ amount: 1002 }, { amount: 2002 }] },
{
id: 3,
name: "name-333",
data: [
{ amount: 1003 },
{ amount: 2003 },
{ amount: 3003 },
{ amount: 3004 }
]
}
]
};
},
created() {
this.initData();
},
methods: {
initData() {
let data = this.tableData;
let arr = [];
let rowspan = [];
data.forEach(item => {
for (let i = 0; i < item.data.length; i++) {
let params = {...item, ...item.data[i]};
params.combineNum = item.data.length;
delete params.data;
console.log("delete params->", params);
arr.push(params);
if (i == 0) {
rowspan.push(item.data.length);
} else {
rowspan.push(0);
}
}
});
this.tableData = arr;
console.log("tableData->", this.tableData);
console.log("rowspan->", rowspan);
this.rowspan = rowspan;
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if ([0, 1,3].includes(columnIndex)) {
const _row = this.rowspan[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
},
}
};
</script>
<style scoped lang="scss">
</style>