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

el-table-column 合併相同數據列

时间: 2025-01-09 10:43:17 浏览: 35

`el-table-column` 是 Element UI 中的一个表格列组件，在 Vue.js 中用于配置表格表头的属性。当需要合并相同的数据显示在同一列时，可以利用 `formatter` 或者 `render` 属性来定制单元格的内容渲染。如果你想在列级别合并数据，例如当遇到某些特定值时，将它们显示为一个总计，你可以使用 `formatter` 函数。例如： ```vue <template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名" width="180" /> <el-table-column prop="value" label="总价" :formatter="formatTotalPrice" ></el-table-column> </el-table> </template> <script> export default { methods: { formatTotalPrice(value) { // 假设我们有一个数组，存储了每个单元格的价格 const prices = this.pricesByValue; if (prices[value]) { // 如果这个价格在数组中有对应项 return `${value} 总价：${prices[value]}`; } else { // 如果没有，则显示单独的值 return value; } } }, data() { return { tableData: [ { name: '张三', value: 100 }, { name: '李四', value: 200 }, { name: '张三', value: 50 } ], pricesByValue: { 100: '已合并', 200: '已合并' } // 这里只是一个示例，实际应用中需要从后端获取或计算 }; } }; </script> ``` 在这个例子中，如果张三的 "value" 是 100 或 200，`formatTotalPrice` 会返回 "张三总价：已合并"，而其他不同的 "value" 则显示单独的数值。

阅读全文