Vue3+element-plustable表格设置反选

在Vue3和Element Plus中，可以通过设置表格的selectable属性来实现反选功能。

首先，在表格的<el-table>标签中添加@selection-change事件处理方法，用于处理选中状态的变化：

<el-table
  :data="tableData"
  :selectable="selectionChange"
  @selection-change="handleSelectionChange"
>
  <!-- 表格列配置 -->
</el-table>

然后，在Vue的methods选项中添加handleSelectionChange方法，该方法会在表格的选中状态变化时被调用：

methods: {
  handleSelectionChange(selection) {
    // 判断是否全选
    if (selection.length === this.tableData.length) {
      this.$refs.table.clearSelection(); // 清空所有选中
    }
  }
}

在handleSelectionChange方法中，我们首先判断当前是否全选，如果是全选状态则调用this.$refs.table.clearSelection()方法清空所有选中项，实现反选的效果。

最后，需要在data选项中定义表格的数据源tableData，并在Vue的mounted钩子函数中初始化数据：

data() {
  return {
    tableData: [] // 表格数据源
  }
},
mounted() {
  // 初始化表格数据
  this.tableData = [
    // 表格数据项
  ];
}

通过以上步骤，就可以实现在Vue3和Element Plus中实现表格的反选功能