element plus 怎么将表格数据 去重分组
时间: 2023-08-05 12:09:01 浏览: 45
要将表格数据进行去重分组,可以使用 Element Plus 提供的 table 组件中的 slots 和 scopedSlots 属性以及 JavaScript 中的 reduce 方法来实现。
1. 首先,需要在 table 组件中设置 scopedSlots 属性。
```html
<el-table :data="tableData" :height="500">
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="age" label="年龄" width="180"></el-table-column>
<el-table-column label="分组">
<template slot-scope="scope">
{{ scope.row.group }}
</template>
</el-table-column>
</el-table>
```
2. 然后,需要在 JavaScript 中对 tableData 进行处理,将其中的数据进行去重和分组。
```javascript
const tableData = [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 },
{ name: '张三', age: 24 },
{ name: '李四', age: 26 }
]
const groupedTableData = tableData.reduce((acc, item) => {
const group = item.name
const existingItem = acc.find(i => i.group === group)
if (existingItem) {
existingItem.data.push(item)
} else {
acc.push({
group,
data: [item]
})
}
return acc
}, [])
console.log(groupedTableData)
// [
// { group: '张三', data: [ { name: '张三', age: 18 }, { name: '张三', age: 24 } ] },
// { group: '李四', data: [ { name: '李四', age: 20 }, { name: '李四', age: 26 } ] },
// { group: '王五', data: [ { name: '王五', age: 22 } ] }
// ]
```
3. 最后,将处理后的数据传递给 table 组件的 data 属性即可。
```html
<el-table :data="groupedTableData" :height="500">
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="age" label="年龄" width="180"></el-table-column>
<el-table-column label="分组">
<template slot-scope="scope">
{{ scope.row.group }}
</template>
</el-table-column>
</el-table>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![tgz](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)