Vue使用ElementUI的el-table，处理合计行问题(el-table树型数据同样适用)

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>

2. 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
    }