当后台管理系统中,表格是非常常见的。表格具有结构清晰、信息明确的特点,可以更快速的获取信息并找到所需内容。你是否遇到需要处理表格单元格合并的情况呢?比如用表格展示一个订单包含多条商品信息时,我们就需要合并单元格。下面就是我用 Element 的 Table 表格实现合并单元格的效果,欢迎大家一起来讨论~
效果:
具体实现代码:
<template>
<el-table
:data="tableData"
border
ref="table"
:span-method="arraySpanMethod"
style="width: 100%"
>
<el-table-column prop="userName" label="顾客姓名" width="80"></el-table-column>
<el-table-column prop="orderNumber" label="订单号" width="130"></el-table-column>
<el-table-column prop="goodName" label="商品名称"> </el-table-column>
<el-table-column prop="goodPrice" label="单价(元)"> </el-table-column>
<el-table-column prop="goodNumber" label="购买数量"> </el-table-column>
<el-table-column prop="orderPrice" label="订单总价(元)" width="120"></el-table-column>
<el-table-column prop="orderDate" label="开单时间" width="120"></el-table-column>
<el-table-column fixed="right" label="操作" width="60">
<template slot-scope="scope">
<el-button type="text" size="small">查看</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
userId: 1001,
userName: "唧唧",
orderNumber: 202404100001,
orderPrice: 35,
orderDate: "2024-04-10",
goods: [
{ goodId: 101, goodName: "薯片", goodNumber: 1, goodPrice: 10.0 },
{ goodId: 102, goodName: "雪糕", goodNumber: 5, goodPrice: 5.0 },
],
},
{
userId: 1002,
userName: "咩咩",
orderNumber: 202404100002,
orderPrice: 59.8,
orderDate: "2024-04-10",
goods: [
{ goodId: 103, goodName: "抽纸", goodNumber: 2, goodPrice: 29.9 },
],
},
{
userId: 1003,
userName: "汪汪",
age: 16,
orderNumber: 202404100003,
orderPrice: 36.0,
orderDate: "2024-04-10",
goods: [
{ goodId: 102, goodName: "雪糕", goodNumber: 2, goodPrice: 5.0 },
{ goodId: 102, goodName: "矿泉水", goodNumber: 2, goodPrice: 3.0 },
{ goodId: 102, goodName: "口罩", goodNumber: 10, goodPrice: 2.0 },
],
},
],
arr: [],
spanTableRow: {}
}
},
mounted() {
this.initData(this.tableData);
},
methods: {
initData(data) {
const tempdata = data.filter((item) => item.goods);
let list = [];
this.arr = [];
let spanTableRow = {};
tempdata.forEach((item, i, data) => {
if (item.goods.length == 0) {
list.push(item);
} else {
item.goods.forEach((e, j) => {
list.push({
...item,
...e
});
});
}
let row = item.goods.length || 1;
if (item && item.orderNumber) {
spanTableRow[item.orderNumber] = {
row: row,
isSpan: -1,
};
}
});
this.spanTableRow = Object.assign({}, spanTableRow);
this.tableData = list;
this.tableData.forEach((item) => {
item.id = item.orderNumber;
});
this.$nextTick(() => {
this.$refs.table.doLayout();
});
},
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (![2, 3, 4].includes(columnIndex)) {
if ( this.spanTableRow[row.orderNumber] && (this.spanTableRow[row.orderNumber].isSpan == rowIndex || this.spanTableRow[row.orderNumber].isSpan === -1) ) {
this.spanTableRow[row.orderNumber].isSpan = rowIndex;
let rowspan = this.spanTableRow[row.orderNumber].row;
return [rowspan, 1];
} else {
return [0, 0];
}
}
}
}
}
</script>