elementui table 设置合计行修改指定单元格样式

可以使用 ElementUI 的 table 组件的 slot-scope 和 scoped slot 来自定义表格的渲染和样式，包括合计行和单元格样式。

具体实现方法如下：

1. 在 table 组件中设置 show-summary 属性为 true，开启合计行功能。

<el-table :data="tableData" show-summary>
  <!-- 表格列定义 -->
</el-table>

2. 在 table-column 组件中使用 scoped slot 来自定义表格的渲染和样式，包括合计行和单元格样式。其中，$index 表示当前行的索引，$column 表示当前列的配置对象，$row 表示当前行的数据对象。

<el-table-column prop="amount" label="金额">
  <template slot-scope="scope">
    <div :class="{ 'highlight': scope.row.amount > 100 }">
      {{ scope.row.amount }}
    </div>
  </template>
  <template slot="summary">
    <div :class="{ 'highlight': sumAmount > 100 }">
      {{ sumAmount }}
    </div>
  </template>
</el-table-column>

在上面的例子中，我们使用了 div 元素来包裹单元格内容，并根据条件动态绑定了 highlight 类名来修改单元格样式。同时，在 summary scoped slot 中也可以使用类似的方式来自定义合计行的渲染和样式。

需要注意的是，在这里我们使用了 sumAmount 变量来保存当前列的合计值，需要在 table 的 methods 属性中添加 sumAmount 方法来计算合计值。

methods: {
  sumAmount: function() {
    return this.tableData.reduce((total, item) => total + item.amount, 0);
  }
}

最后，我们可以在样式表中定义 highlight 类名来修改单元格样式。

.highlight {
  color: red;
  font-weight: bold;
}

以上就是使用 ElementUI 的 table 组件设置合计行并修改指定单元格样式的方法。