ivew表格添加单个单元格高亮

在iView表格组件中，如果你想为表格的单个单元格添加高亮效果，你可以使用`highlight-row`属性配合`cell-style`或`row-class-name`。这里有两个方法：

1. **使用`cell-style`**: 对于每个单元格，你可以定义一个包含CSS样式的对象数组，当某一行满足特定条件时，对应单元格会应用该样式。例如：

<iview-table :data="tableData" :highlight-row="{ row: highlightRowFn }">
  <template slot-scope="scope">
    <template v-if="scope.row.highlighted">
      <td style="background-color: yellow;">{{ scope.$index + 1 }}</td>
    </template>
    <template v-else>
      <td>{{ scope.$index + 1 }}</td>
    </template>
  </template>
</iview-table>

<script>
export default {
  data() {
    return {
      tableData: ...,
      highlightRowFn(row) { // 自定义函数判断是否高亮
        if (/* 条件 */) {
          return true;
        }
        return false;
      }
    };
  },
};
</script>

在这个例子中，`highlightRowFn`是一个自定义函数，可以根据数据动态设置哪一行应该被高亮。

2. **使用`row-class-name`**：如果需要对整个行进行高亮，可以给每一行添加一个唯一的类名，然后在CSS中定义这个类的样式：

<iview-table :data="tableData" :row-class-name="getRowClassName">
  ...
</iview-table>

<script>
export default {
  methods: {
    getRowClassName({ row }) {
      if (/* 条件 */) {
        return 'highlight-row';
      }
      return '';
    }
  },
  computed: {
    tableData() {
      return [
        { ... }, // 表格数据
        // ...
      ];
    }
  }
};
<style>
.highlight-row {
  background-color: yellow; /* 高亮颜色 */
}
</style>

同样地，你需要在`getRowClassName`方法里定义高亮的逻辑。