el-table-colum的合计
时间: 2023-11-23 15:55:24 浏览: 44
el-table-column的合计是指在表格的某一列中,对该列的所有数据进行求和、平均值等操作,并将结果显示在表格底部的合计行中。在使用el-table时,可以通过设置表格列的属性来实现合计功能。
具体实现方法如下:
1. 在el-table-column中设置prop属性,指定该列对应数据的字段名。
2. 在el-table中设置show-summary属性为true,开启合计功能。
3. 在el-table-column中设置summary-method属性,指定合计方法,该方法接收一个参数param,包含当前列的信息和数据,需要返回一个对象,对象的key为表格底部合计行对应列的prop属性值,value为合计结果。
例如,对于一个包含销售额和利润的表格,可以按照以下方式实现销售额和利润的合计:
```html
<el-table :data="tableData" show-summary>
<el-table-column prop="sales" label="销售额" :summary-method="summarizeSales"></el-table-column>
<el-table-column prop="profit" label="利润" :summary-method="summarizeProfit"></el-table-column>
</el-table>
```
```javascript
methods: {
summarizeSales(param) {
const { data } = param
let sum = 0
data.forEach(item => {
sum += item.sales
})
return { sales: sum }
},
summarizeProfit(param) {
const { data } = param
let sum = 0
data.forEach(item => {
sum += item.profit
})
return { profit: sum }
}
}
```
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)