vue elementUI表格合计行取不为0或不为null的最小值
时间: 2024-03-12 14:46:57 浏览: 62
你可以使用 ElementUI 表格的 `sum-text` 和 `summary-method` 属性来实现合计行的功能,并在 `summary-method` 方法中计算最小值。
具体实现步骤如下:
1. 在表格列定义中,将需要合计的列的 `sum-text` 属性设置为函数,用于计算合计值:
```html
<el-table-column prop="price" label="价格" sum-text="getTotal"></el-table-column>
```
2. 在表格实例中,添加 `summary-method` 方法,用于计算合计行的数据:
```javascript
methods: {
// 计算合计行数据
getSummaryData(data) {
const totalPriceArr = data.map(item => item.price).filter(item => item !== null && item !== 0)
const minPrice = Math.min(...totalPriceArr)
return [
{ price: '合计', minPrice }
]
},
// 计算合计值
getTotal(param) {
const { data } = param
const totalPrice = data.reduce((total, item) => {
if (item.price !== null && item.price !== 0) {
total += item.price
}
return total
}, 0)
return `¥${totalPrice.toFixed(2)}`
}
}
```
在 `getSummaryData` 方法中,我们先将表格数据中所有不为 0 或 null 的价格放入一个数组中,然后使用 `Math.min` 方法计算最小值。
3. 在表格实例中,将 `summary-method` 属性设置为 `getSummaryData` 方法:
```html
<el-table :data="tableData" style="width: 100%" :summary-method="getSummaryData">
```
这样就可以在表格的合计行中显示最小价格了。
阅读全文