UI组件--element-ui--Table组件自定义合计行

需求: Element-ui的Table组件自带合计行, 但是需求需要在合计行的某些单元格有特别的样式以及事件, 没有研究出怎么在既有合计行上完成此需求, 于是利用其原本的一些属性完成自定义合计行.

分析: 在Table组件中是有columns(包含所有列的数据的数组)的, 但是只有在summary-method事件中才暴露出来, 用来自定义合计行, 可以利用此事件来获得columns, 但是又不想显示自带的合计行, 就可以这样:

<template>
    <el-table
      @row-click="rowClick"
      @cell-click="singleClick"
      :row-class-name="setSumRowStyle"
      :data="tableData"
      stripe
      show-summary
      :summary-method="getColumns"
      style="width: 100%"
      >
    </el-table>
</template>

    // 获取columns
    getColumns(param) {
      const { columns } = param;
      this.columns = columns;
      return []
    },

    // 计算合计行
    getSummaries (data) {
      let Obj = {};
      Obj.type = 'sum';
      let lastData = this.levelList[this.levelList.length - 1];this.columns.forEach((column, index) => {
        if (index === 0) {
          Obj[column.property] = '全部';
          return;
        }
        if (index === 1) {
          Obj[column.property] = "上一层公司名???";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          Obj[column.property] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        }  else {
          Obj[column.property] = '--';
        }
      })
      return Obj;
    },

    // 将合计行数据添加到已有的列表数据的最后一项, 如果是异步, 请在请求到列表数据并且视图更新后再调用合计行方法
    getNewTableData (row) {
      api.getList(this.checkForm).then(res => {
        console.log(res);
        if (res.status === 0 && res.result.record.length > 0) {this.columns = [];
          let newData = res.result.record;
          this.tableData = newData;
          this.total = res.result.totalCount;
          // 视图更新后再求和
          this.$nextTick(() => {
            let summaries = this.getSummaries(newData);
            this.tableData.push(summaries);
          })
        }
      })
    },

以上步骤已经自定义完成, 但是这些是Table组件自带求和可以完成的, 我们辛苦的自定义合计主要是为了扩展事件以及样式,  此时, 只需在table表格中判断一下就可以用了:

样式:

// text_bule_underline是样式名称
　　<el-table
      @row-click="rowClick"
      @cell-click="singleClick"
      :row-class-name="setSumRowStyle"
      :data="tableData"
      stripe
      show-summary
      :summary-method="getColumns"
      style="width: 100%"
      >
      <el-table-column
        prop="name"
        width="160px"
        label="姓名">
        <template slot-scope="scope">
          <span :class="(scope.row.type && scope.row.type == 'sum') ? 'text_bule_underline': ''">{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="age"
        min-width="180px"
        label="年龄">
        <template slot-scope="scope">
          <span :class="(scope.row.type && scope.row.type == 'sum') ? 'text_bule_underline': ''">{{scope.row.age}}</span>
        </template>
      </el-table-column>
　　</el-table>

事件: 可以在 @row-click="rowClick" 或者 @cell-click="singleClick" 里面判断触发.

    // 点击行
    rowClick (row, event, column) {
      if (column.label=='查看'|| (row.type && row.type=="sum")) {
        return
      }
      this.getInfo();
    },
    // 点击单元格
    singleClick(row, column, cell, event) {
      if (column.label=='查看') {
        this.getDetailList();
      }
    },

目前除了以上这种我还没有找到更好的方法为Table组件合计行的某些单元格加上事件或者样式,  如果有其他更简便的方法, 欢迎交流~