首页el-table-column 合併相同數據

el-table-column 合併相同數據

时间: 2025-01-06 16:39:58 浏览: 31

`el-table-column` 是 Element UI 中用于表格列配置的一个组件，当需要合并显示相同的数据项时，可以使用 `formatter` 或者 `render` 函数来实现自定义渲染。在这种场景下，你可以： 1. **使用 formatter**：通过比较当前行数据和其他行数据，如果发现某属性值相同时，只显示一次，并在其后添加“总计”、“合计”等字样。 ```javascript <template> <el-table-column prop="name" label="姓名" :formatter="mergeData" /> </template> <script> export default { methods: { mergeData(value, row) { const isDuplicate = this.data.some((r) => r.name === value); return isDuplicate ? `${value} (合计)` : value; } }, data() { return { // 表格数据数组 data: [ { name: '张三', ... }, { name: '李四', ... }, { name: '张三', ... }, // 第三个是相同的 ] }; } }; </script> ``` 2. **使用 render 函数**：创建一个自定义组件或者函数，检查并渲染合并的元素。 ```javascript <template> <el-table-column prop="name" label="姓名" :render="customRenderFn" /> </template> <script> export default { methods: { customRenderFn(h, params) { const { row } = params; let content = row.name; if (this.findSameName(row.name)) { content += ' (合计)'; } return h('div', content); }, findSameName(name) { // 在这里查找是否有其他行与当前行的name相同 } } }; </script> ``` 请注意，你需要根据实际数据结构和需求调整查找相同数据的方式。

阅读全文