当前位置：首页 > news >正文

纵向合并单元格——table

news 来源：原创 2024/9/20 11:23:57

在这里插入图片描述

将list数据处理成tableDate格式，id重复的数据，只有第一项有num字段（num是重复的个数）
渲染表格，纵向合并第1、2、6列，id相同的合并

<template><div><el-table:data="tableData":span-method="objectSpanMethod"borderstyle="width: 60%; margin: 20px"><el-table-column prop="id" label="ID" width="180"> </el-table-column><el-table-column prop="num" label="num" width="180"> </el-table-column><el-table-column prop="name" label="姓名"> </el-table-column><el-table-column prop="amount1" label="数值 1（元）"> </el-table-column><el-table-column prop="amount2" label="数值 2（元）"> </el-table-column><el-table-column prop="amount3" label="数值 3（元）"> </el-table-column></el-table></div>
</template><script>
export default {data() {return {list: [{id: "1",num: 3,car: [{name: "大萨达",amount1: 22,amount2: 1000,},{name: "大萨达",amount1: 22,amount2: 1000,},{name: "大萨达",amount1: 22,amount2: 1000,},],amount3: 3,},{id: "2",num: 2,car: [{name: "大萨达",amount1: 22,amount2: 1000,},{name: "大萨达",amount1: 22,amount2: 1000,},],amount3: 3,},{id: "3",num: 1,car: [{name: "大萨达",amount1: 22,amount2: 1000,},],amount3: 3,},{id: "4",num: 4,car: [{name: "大萨达",amount1: 22,amount2: 1000,},{name: "大萨达",amount1: 22,amount2: 1000,},{name: "大萨达",amount1: 22,amount2: 1000,},{name: "大萨达",amount1: 22,amount2: 1000,},],amount3: 30,},],tableData: [{id: "1",num: 3,name: "王小虎1",amount1: "234",amount2: "3.2",amount3: 10,},{id: "1",name: "王小虎2",amount1: "234",amount2: "3.2",},{id: "1",name: "王小虎3",amount1: "234",amount2: "3.2",},{id: "2",num: 2,name: "王小虎4",amount1: "165",amount2: "4.43",amount3: 12,},{id: "2",name: "王小虎5",amount1: "165",amount2: "4.43",},{id: "3",num: 1,name: "王小虎6",amount1: "324",amount2: "1.9",amount3: 9,},{id: "4",num: 4,name: "王小虎7",amount1: "621",amount2: "2.2",amount3: 17,},{id: "4",name: "王小虎8",amount1: "539",amount2: "4.1",},{id: "4",name: "王小虎9",amount1: "539",amount2: "4.1",},{id: "4",name: "王小虎10",amount1: "539",amount2: "4.1",},],};},methods: {objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0 || columnIndex === 1 || columnIndex === 5) {if (row.num) {return { rowspan: row.num, colspan: 1 };} else {return { rowspan: 0, colspan: 0 };}}return { rowspan: 1, colspan: 1 };},flattenAndMerge(data) {const result = [];// 遍历原始数据data.forEach((item) => {// 提取公共字段const commonFields = {id: item.id,amount3: item.amount3,};// 遍历 car 数组item.car.forEach((carItem, index) => {// 复制公共字段const rowData = { ...commonFields };// 添加 car 数组中的字段rowData.name = carItem.name;rowData.amount1 = carItem.amount1;rowData.amount2 = carItem.amount2;// 如果是第一个元素，则保留 num 字段if (index === 0) {rowData.num = item.num;}result.push(rowData);});});return result;},},mounted() {this.tableData = this.flattenAndMerge(this.list);console.log(this.tableData);},
};
</script>