el-table合计加粗

在Element UI的el-table组件中，如果你想让表格的合计行（total row）显示为粗体，可以使用自定义渲染功能来实现。你可以创建一个计算列（computed column），在这个计算列的模板里使用`<span>`标签并设置其CSS样式为`text-weight: bold`。这里是一个基本的例子：

<template>
  <el-table :data="tableData" style="width: 100%">
    <!-- ...常规的表头和数据列... -->
    
    <el-table-column type="sum" label="总计">
      <template slot-scope="scope">
        <span v-bind:class="{ 'bold-font': scope.$index === totalRowIndex }">{{ scope.row.total }}</span>
      </template>
    </el-table-column>

    <template v-if="showTotalRow">
      <tr class="total-row" v-for="(item, index) in tableData" :key="index" :class="{ totalRow: index === totalRowIndex }">
        <td>{{ item.total }}</td> <!-- 或者其他需要总计的地方 -->
      </tr>
    </template>

  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 数据数组
      showTotalRow: false,
      totalRowIndex: -1, // 记录总行索引
    };
  },
  computed: {
    total() {
      let sum = this.tableData.reduce((prev, curr) => prev + curr.total, 0);
      this.showTotalRow = true;
      this.totalRowIndex = this.tableData.length; // 确定总行位置
      return sum;
    }
  },
};
</script>

<style scoped>
.bold-font {
  font-weight: bold;
}
.total-row {
  background-color: #f5f5f5; /* 可选，给总行添加背景色 */
}
</style>