vxe-table 行高亮

vxe-table 是一个基于 Vue.js 的开源表格组件库，它提供了丰富的功能和灵活的配置选项。行高亮是 vxe-table 中的一个特性，可以用于突出显示表格中的某些行。

要实现行高亮，你可以使用 vxe-table 提供的 highlight-row 属性。该属性接受一个函数，用于判断哪些行需要高亮显示。函数会接收两个参数：row（当前行的数据对象）和 rowIndex（当前行的索引）。

在函数中，你可以根据自己的需求来判断是否需要高亮当前行。如果需要高亮，则返回一个包含 CSS 类名的字符串，用于指定高亮的样式。

以下是一个示例代码，演示如何在 vxe-table 中实现行高亮：

<template>
  <vxe-table
    :data="tableData"
    :highlight-row="highlightRow"
  >
    <!-- 表格列配置 -->
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 表格数据
      ]
    };
  },
  methods: {
    highlightRow(row, rowIndex) {
      // 判断是否需要高亮当前行
      if (rowIndex % 2 === 0) {
        return 'highlight'; // 返回高亮的样式类名
      }
      return ''; // 不需要高亮时返回空字符串
    }
  }
};
</script>

<style>
.highlight {
  background-color: yellow; // 自定义高亮的样式
}
</style>

在上述示例中，我们通过 highlightRow 方法来判断是否需要高亮当前行。这里的判断条件是根据行索引是否为偶数来决定的。如果是偶数行，则返回 'highlight'，表示需要高亮，同时在样式中定义了高亮的背景色为黄色。

你可以根据自己的需求来修改 highlightRow 方法中的判断条件和样式，以实现你想要的行高亮效果。