ElementUI中Table表格自定义计算方法

JiuyeXD

April 19, 2021

467 views

No comments

2045 words

技术杂谈

## 自定义方法

table 中 使用 summary-method 指定自定义计算方法

```xml
  <el-table
    :data="tableData"
    border
    show-summary
    :summary-method="getSummaries"
    style="width: 100%">
    <el-table-column
      prop="id"
      label="ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="amount1"
      sortable
      label="数值 1">
    </el-table-column>
    <el-table-column
      prop="amount2"
      sortable
      label="数值 2">
    </el-table-column>
    <el-table-column
      prop="amount3"
      sortable
      label="数值 3">
    </el-table-column>
  </el-table>
```

```javascript
        tableData: [{
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }]
```

```javascript
      /** 计算单元格 */
      getSummaries(param) {
        const { columns, data } = param;
        const sums = []; //声明变量
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = "合计";
            return;
          }
          const values = data.map((item) => Number(item<div class="flex-column"></div>));
          if (
            //需要显示和合计纵列
            column.property == "amount1"  ||
            column.property == "amount2"  ||
            column.property == "amount3"  
          ) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index]+='元';
          } else {
          }
        });
        return sums;
      },
```

![image.png](https://old.qwq.ro/usr/uploads/2021/04/3695102983.png)

特别注意:
如果循环的时候不加:prop="item.prop"
自定义合计的时候

```javascript
const values = data.map((item) => Number(item<div class="flex-column"></div>));
```

property无法匹配到对应的数据

Last modification：May 28, 2021