Vue Element 树形表格合计列 show-summary 实现教程
在 Vue 和 Element UI 中，要在树形表格中显示合计列，可以使用 'show-summary' 属性。
首先，在表格的栏目定义中，添加一个 'slot-scope='scope'' 的 'el-table-column'，用于显示合计列的内容。然后，在该 'el-table-column' 中，使用 ' 定义表头的内容，使用 ' 定义每行的内容。
接下来，在树形表格的 'el-table' 标签中添加 'show-summary' 属性，并在 'el-table-column' 中设置 'summary-method' 属性为一个方法，用于计算合计列的值。
下面是一个示例代码：
<template>
<el-table :data="tableData" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" show-summary>
<el-table-column prop="name" label="名称" width="180"></el-table-column>
<el-table-column prop="value" label="值" width="180"></el-table-column>
<el-table-column label="合计">
<template slot="header">
<span>合计</span>
</template>
<template slot-scope="scope">
<span>{{ getSummary(scope) }}</span>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: 'A',
value: 10,
children: [
{
name: 'A1',
value: 5
},
{
name: 'A2',
value: 3
}
]
},
{
name: 'B',
value: 8,
children: [
{
name: 'B1',
value: 4
},
{
name: 'B2',
value: 2
}
]
}
]
}
},
methods: {
getSummary(scope) {
let sum = 0;
scope.row.children.forEach(child => {
sum += child.value;
});
return sum;
}
}
}
</script>
在上面的示例中， 'tableData' 是一个包含树形数据的数组。 'getSummary' 方法用于计算每个节点下子节点的值的合计。在 'el-table-column' 的 'slot-scope' 中使用 'getSummary' 方法获取合计值，并显示在合计列中。
这样，就可以在 Vue 和 Element UI 的树形表格中显示合计列了。
原文地址: https://www.cveoy.top/t/topic/pjsP 著作权归作者所有。请勿转载和采集!