el-table怎么判断这一列没值
时间: 2023-10-14 13:28:34 浏览: 78
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
你可以在使用 `el-table` 组件的时候,通过设置 `show-summary` 属性来显示表格的汇总行。在汇总行中,你可以使用 `sum-text` 或者 `summary-method` 属性来设置汇总行的内容。具体来说,你可以在 `summary-method` 方法中对表格中的数据进行计算,然后根据计算结果来显示汇总行中的内容。如果你要判断某一列是否为空,则可以在 `summary-method` 方法中遍历表格数据中的对应列,判断该列是否存在空值。例如:
```html
<template>
<div>
<el-table :data="tableData" show-summary :summary-method="getSummary">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: 'John',
age: 18
},
{
name: 'Jane',
age: null
}
]
}
},
methods: {
getSummary(param) {
let ageSummary = 0
let ageValidCount = 0
for (let i = 0; i < param.length; i++) {
if (param[i].age !== null) {
ageSummary += param[i].age
ageValidCount++
}
}
return [
{
name: 'Summary',
age: `Average: ${ageSummary / ageValidCount}`
}
]
}
}
}
</script>
```
在上面的示例中,我们在 `getSummary` 方法中遍历了表格数据中的 `age` 列,判断该列是否存在空值,并且计算了有效值的平均值,在汇总行中显示了平均值。
阅读全文