Element UI 表格单行选中高亮显示 - 色块和加粗字体

要在 el-table 中选择单行数据时使用色块表示并且字体加粗，你可以使用 el-table 的 slot-scope 属性和自定义样式来实现。

首先，在 el-table 中添加一个 slot-scope 属性，将行数据的索引传递给它：

<el-table :data="tableData">
  <el-table-column label="姓名" prop="name"></el-table-column>
  <el-table-column label="年龄" prop="age"></el-table-column>
  <el-table-column label="地址" prop="address"></el-table-column>
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-button @click="handleRowClick(scope.$index)">选择</el-button>
    </template>
  </el-table-column>
</el-table>

接下来，在你的样式表中添加以下 CSS 样式：

.el-table__row--selected {
  background-color: #f5f7fa;
  font-weight: bold;
}

最后，在你的 Vue 组件中添加一个方法来处理行点击事件，并在方法中更新选中行的索引：

data() {
  return {
    tableData: [...], // 表格数据
    selectedRowIndex: -1 // 选中行的索引
  };
},
methods: {
  handleRowClick(rowIndex) {
    this.selectedRowIndex = rowIndex;
  }
}

现在，当你点击表格中的行时，选中的行将使用色块表示，并且字体将加粗。