Element UI 表格：高亮选中行并加粗字体

要在 el-table 中使用色块来表示当前选择的行并加粗字体，可以使用以下步骤：

在 el-table 组件上添加属性 highlight-current-row 来启用当前行高亮效果。

<el-table :data="tableData" highlight-current-row>
  <!-- 表头和表格内容 -->
</el-table>

在 el-table-column 组件上添加 scoped-slot 属性来自定义当前行的样式和内容。

<el-table-column prop="name" label="姓名" width="150" scoped-slot="default">
  <template slot-scope="scope">
    <div :class="{'highlight-row': scope.row === currentRow}">
      <span :style="{'font-weight': scope.row === currentRow ? 'bold' : 'normal'}">{{scope.row.name}}</span>
    </div>
  </template>
</el-table-column>

在样式文件中定义高亮行的背景色和字体加粗样式。

.highlight-row {
  background-color: #f5f5f5;
  font-weight: bold;
}

在上述代码中，我们使用了一个变量 currentRow 来存储当前选择的行数据。通过比较当前行的数据和 currentRow 的值，来判断是否为当前选择的行，如果是则添加 highlight-row 类名，实现背景色高亮和字体加粗效果。