elementUi中的el-table合计行添加点击事件

在Element UI的el-table组件中，合计行是自动生成的，并没有提供直接的方法来给合计行添加点击事件。但是，你可以通过自定义合计行的方式来实现这个需求。

以下是一个示例，展示了如何自定义合计行并添加点击事件：

<template>
  <el-table
    :data="tableData"
    show-summary
    :summary-method="customSummaryMethod"
    style="width: 100%;">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '李小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }]
    };
  },
  methods: {
    customSummaryMethod({ columns, data }) {
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          sums[index].setAttribute('style', 'cursor: pointer;');
          sums[index].onclick = this.handleSummaryClick;
        } else {
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          } else {
            sums[index] = 'N/A';
          }
        }
      });
      return sums;
    },
    handleSummaryClick() {
      console.log('合计行被点击');
      // 在这里添加点击合计行后的逻辑
    }
  }
};
</script>

在上面的代码中，customSummaryMethod是用来自定义合计行的显示内容的方法。在这个方法中，我们通过对第一列（通常是合计行）的内容进行操作，给它添加了点击事件。当用户点击合计行时，会触发handleSummaryClick方法，并在控制台输出一条消息。

请注意，这种方法涉及到直接操作DOM，可能会在未来的Element UI版本中失效。如果Element UI更新了合计行的生成机制，这种方法可能需要更新。因此，这只是一个快速的解决方案，并不保证在未来的Element UI版本中仍然有效。