element-ui的table设置fixed之后,点击checkbox高亮有问题

在使用element-ui的table组件并设置fixed属性后，如果在表格中的复选框处点击选择时，可能会出现高亮显示问题。

通常，当表格的列设置为fixed属性时，该列的宽度将固定不变，无法随表格的水平滚动而移动。这是为了保持固定的布局，以便在表格内容较多时的视觉统一性和可读性。

然而，当我们在fixed列中的复选框处点击选择时，由于默认的样式设置，点击复选框将触发复选框所在单元格的选中状态，而不是复选框本身的高亮显示。这可能会导致用户选择复选框时，无法正确地看到复选框是否被选中的视觉反馈。

要解决这个问题，我们可以使用element-ui的slot插槽来自定义复选框的显示方式。通过在表格组件中添加一个slot插槽，并在插槽中添加复选框元素及其样式，我们可以实现在fixed列中点击复选框时，正确高亮显示复选框的效果。

具体代码示例如下：

<el-table :data="tableData" style="width: 100%">
  <el-table-column
    type="selection"
    fixed
    align="center"
    width="50"
  >
    <template slot-scope="{ row }">
      <div class="custom-checkbox">
        <el-checkbox v-model="row.selected"></el-checkbox>
      </div>
    </template>
  </el-table-column>
  <!-- 其他表格列 -->
</el-table>

在上述代码中，我们使用了slot插槽来自定义复选框的显示方式。通过`<template slot-scope="{ row }">`，我们可以获取到每一行的数据对象，并在`<el-checkbox>`元素中使用`v-model="row.selected"`来实现复选框的选中状态。

通过添加自定义的样式，例如`.custom-checkbox`，我们可以为复选框设置高亮显示效果。

这样一来，当我们在fixed列中点击复选框时，复选框会正确高亮显示，以提供正确的视觉反馈。