el-table树型数据合计行
1.el-table部分的代码
<el-table
:data="tableList"
border
row-key="orgId"
:summary-method="getSummaries"
show-summary>
<el-table-column prop="orgname" label="机构名称" width="250"></el-table-column>
<el-table-column align="center" label="管理档案">
<el-table-column prop="number" label="档案数" align="center"></el-table-column>
</el-table-column>
<el-table-column align="center" label="档案动态更新">
<el-table-column prop="name" label="活动档案数" align="center"></el-table-column>
<el-table-column prop="name" label="更新率(%)" align="center"></el-table-column>
</el-table-column>
</el-table>
- data里边的数据
tableList = [
{
orgId: '1',
orgname: 'sss',
name: '11',
number: '11',
children: [
{
orgId: '2',
orgname: 'ddd',
number: '15',
name: '9'
},
{
orgId: '3',
orgname: 'fff',
number: '3',
name: '6',
children: [
{
orgId: '4',
orgname: 'bbb',
number: '1',
name: '4'
},
{
orgId: '5',
orgname: 'mmm',
number: '10',
name: '3',
children: [
{
orgId: '6',
orgname: 'fff',
number: '0',
name: '2'
},
{
orgId: '7',
orgname: 'ggg',
number: '3',
name: '1'
}
]
}
]
}
]
}
]
2.methods里边的代码
getSum (tree, idx, sums, index) {
if (tree && tree.length > 0) {
tree.map(item => {
this.getSum(item.children, idx, sums, index)
sums[index] += Number(item[idx])
})
}
},
getSummaries (param) {
const { columns, data } = param
const sums = []
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计'
return
}
// 初始化合计行
sums[index] = 0
// 递归求和
this.getSum(data, column.property, sums, index)
// 如果求和得到的结果是非数字,则显示--
if (isNaN(sums[index])) {
sums[index] = '--'
}
})
return sums
}