vue3+iview点击Table表格高亮，再次点击取消高亮

在 Vue3 和 iView 中，可以通过设置 `highlight-row` 属性来实现 Table 表格的行高亮效果。而点击行高亮、再次点击取消高亮的效果，则需要通过自定义 `highlight` 方法来实现。

1. 在 Table 组件上添加 `highlight-row` 属性，指定高亮行的样式名：

<Table :data="tableData" highlight-row class-name="table-highlight">
  <Table-column prop="name" label="姓名"></Table-column>
  <Table-column prop="age" label="年龄"></Table-column>
</Table>

2. 给 Table 组件绑定 `highlight` 事件，实现点击行高亮、再次点击取消高亮的效果：

<Table :data="tableData" highlight-row class-name="table-highlight" @highlight="handleHighlight">
  <Table-column prop="name" label="姓名"></Table-column>
  <Table-column prop="age" label="年龄"></Table-column>
</Table>

export default {
  data() {
    return {
      tableData: [
        { name: 'Tom', age: 18 },
        { name: 'Jerry', age: 20 },
        { name: 'Mike', age: 22 }
      ],
      highlightedRow: null
    };
  },
  methods: {
    handleHighlight(row, event) {
      if (this.highlightedRow === row) {
        this.highlightedRow = null;
        event.target.classList.remove('table-highlight');
      } else {
        if (this.highlightedRow) {
          this.highlightedRow.$el.classList.remove('table-highlight');
        }
        this.highlightedRow = row;
        event.target.classList.add('table-highlight');
      }
    }
  }
};

以上代码中，我们通过在 data 中定义 `highlightedRow` 变量来保存当前高亮的行，然后在 `handleHighlight` 方法中根据点击的行和当前高亮的行来判断是否需要取消高亮。如果当前高亮的行和点击的行相同，则取消高亮；否则，先取消当前高亮的行的高亮样式，再为点击的行添加高亮样式，并更新 `highlightedRow` 变量。注意，在添加和取消高亮样式时，需要通过 `event.target` 来获取当前点击的元素，并调用 `classList` 属性来添加或删除样式。