UI组件

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

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

1<template>
2    <el-table
3      @row-click="rowClick"
4      @cell-click="singleClick"
5      :row-class-name="setSumRowStyle"
6      :data="tableData"
7      stripe
8      show-summary
9      :summary-method="getColumns"
10      style="width: 100%"
11      >
12    </el-table>
13</template>
14
15// 获取columns
16    getColumns(param) {
17      const { columns } = param;
18      this.columns = columns;
19      return []
20    },
21
22    // 计算合计行
23    getSummaries (data) {
24      let Obj = {};
25      Obj.type = 'sum';
26      let lastData = this.levelList[this.levelList.length - 1];this.columns.forEach((column, index) => {
27        if (index === 0) {
28          Obj[column.property] = '全部';
29          return;
30        }
31        if (index === 1) {
32          Obj[column.property] = "上一层公司名???";
33          return;
34        }
35        const values = data.map(item => Number(item[column.property]));
36        if (!values.every(value => isNaN(value))) {
37          Obj[column.property] = values.reduce((prev, curr) => {
38            const value = Number(curr);
39            if (!isNaN(value)) {
40              return prev + curr;
41            } else {
42              return prev;
43            }
44          }, 0);
45        }  else {
46          Obj[column.property] = '--';
47        }
48      })
49      return Obj;  
50    },
51
52// 将合计行数据添加到已有的列表数据的最后一项, 如果是异步, 请在请求到列表数据并且视图更新后再调用合计行方法
53    getNewTableData (row) { 
54      api.getList(this.checkForm).then(res => {
55        console.log(res);
56        if (res.status === 0 && res.result.record.length > 0) {this.columns = [];
57          let newData = res.result.record;
58          this.tableData = newData;
59          this.total = res.result.totalCount;
60          // 视图更新后再求和
61          this.$nextTick(() => {
62            let summaries = this.getSummaries(newData);
63            this.tableData.push(summaries);
64          })
65        }
66      })
67    },

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

样式:

1// text_bule_underline是样式名称
2　　<el-table
3      @row-click="rowClick"
4      @cell-click="singleClick"
5      :row-class-name="setSumRowStyle"
6      :data="tableData"
7      stripe
8      show-summary
9      :summary-method="getColumns"
10      style="width: 100%"
11      >
12      <el-table-column
13        prop="name"
14        width="160px"
15        label="姓名">
16        <template slot-scope="scope">
17          <span :class="(scope.row.type && scope.row.type == 'sum') ? 'text_bule_underline': ''">{{scope.row.name}}</span>
18        </template>
19      </el-table-column>
20      <el-table-column
21        prop="age"
22        min-width="180px"
23        label="年龄">
24        <template slot-scope="scope">
25          <span :class="(scope.row.type && scope.row.type == 'sum') ? 'text_bule_underline': ''">{{scope.row.age}}</span>
26        </template>
27      </el-table-column>
28　　</el-table>

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

1// 点击行
2    rowClick (row, event, column) {
3      if (column.label=='查看'|| (row.type && row.type=="sum")) {
4        return
5      }
6      this.getInfo();
7    },
8    // 点击单元格
9    singleClick(row, column, cell, event) {
10      if (column.label=='查看') {
11        this.getDetailList();
12      }
13    },

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