Elemui表单合并

news/2024/11/6 14:41:32/

原代码形式

<template><el-table:data="tableData"borderstyle="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</template><script>export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-02',name: '王小龙',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-03',name: '王小马',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小海',address: '上海市普陀区金沙江路 1516 弄'}, {date: '2016-05-03',name: '王小冰',address: '上海市普陀区金沙江路 1516 弄'}]}}}
</script>

在这里插入图片描述

合并为一行

解读：
要将相同日期的数据合并为一行，您可以使用计算属性(computed property)来处理数据。在计算属性中，您可以对tableData进行分组，并对每个日期进行聚合操作。下面是一个修改过的代码示例：

<template><el-table:data="mergedTableData"borderstyle="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</template><script>
export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-02',name: '王小龙',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-03',name: '王小马',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小海',address: '上海市普陀区金沙江路 1516 弄'}, {date: '2016-05-03',name: '王小冰',address: '上海市普陀区金沙江路 1516 弄'}]}},computed: {mergedTableData() {const mergedData = {};this.tableData.forEach((item) => {if (mergedData[item.date]) {mergedData[item.date].push(item);} else {mergedData[item.date] = [item];}});const result = [];for (const date in mergedData) {if (Object.prototype.hasOwnProperty.call(mergedData, date)) {const mergedItem = {date,name: mergedData[date][0].name,address: mergedData[date].map((item) => item.address).join(', ')};result.push(mergedItem);}}return result;}}
}
</script>

在上面的代码中，我们添加了一个计算属性mergedTableData，它对tableData进行遍历并构建了一个新的合并后的数据数组result。对于每个日期，我们将相同日期的数据合并到一个数组中，然后通过map和join方法将地址合并为一个字符串。最后，我们通过返回result来更新el-table的数据。

注意：在这个示例中，我们假设日期是唯一的，没有重复的日期数据。如果有重复的日期，请根据实际情况进行修改。

这样就可以将相同日期的数据合并为一行在el-table中显示了。

在这里插入图片描述