Element UI el-table单行选择高亮显示实现

要在el-table中使用色块表示选择的单行数据，可以通过以下步骤实现：

在el-table的列定义中，添加一个自定义的slot，用于渲染选择的色块。例如：

<el-table-column type="selection">
  <template slot-scope="scope">
    <div :class="{'selected-row': scope.row.selected}"></div>
  </template>
</el-table-column>

在上面的例子中，我们定义了一个名为'selected-row'的CSS类，用于渲染选择的色块。我们使用:class绑定，根据行数据的'selected'属性来动态添加这个CSS类。

在el-table的数据源中，添加一个'selected'属性，用于标记选择的行数据。例如：

data() {
  return {
    tableData: [
      { name: 'John', age: 25, selected: false },
      { name: 'Jane', age: 30, selected: false },
      { name: 'Bob', age: 35, selected: false }
    ]
  }
}

在上面的例子中，我们为每一行数据添加了一个'selected'属性，并初始化为false。

在el-table的选择变化事件中，更新行数据的'selected'属性。例如：

<el-table @selection-change="handleSelectionChange" :data="tableData">
...
</el-table>

methods: {
  handleSelectionChange(selection) {
    this.tableData.forEach(row => {
      row.selected = selection.includes(row);
    });
  }
}

在上面的例子中，我们通过遍历数据源，根据选择的行数据来更新每一行的'selected'属性。

在CSS样式中定义'selected-row'类的样式，用于渲染选择的色块。例如：

.selected-row {
  background-color: #f0f0f0;
}

在上面的例子中，我们定义了一个背景颜色为"#f0f0f0"的样式，用于表示选择的行数据。

这样，当你在el-table中选择一行数据时，就会使用色块来表示选择的行。