element ui tables中勾选框反选

在 Element UI 的表格中，要实现勾选框的反选功能，你可以使用以下步骤：

1. 首先，确保你的表格列定义了一个名为 `selection` 的类型，这样会在每一行添加一个勾选框列。例如：

<el-table-column type="selection"></el-table-column>

2. 在你的 Vue 组件中，定义一个变量来存储选中的行数据。例如：

data() {
  return {
    selectedRows: []
  }
}

3. 在表格组件中，在 `el-table` 标签上添加 `@selection-change` 事件监听器，并将选中的行数据存储到 `selectedRows` 变量中。例如：

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

4. 在 Vue 组件的方法中，实现 `handleSelectionChange` 方法来更新 `selectedRows` 变量的值。例如：

methods: {
  handleSelectionChange(selection) {
    this.selectedRows = selection
  },

5. 最后，在 Vue 组件中，定义一个反选的方法来实现勾选框的反选功能。例如：

methods: {
  inverseSelection() {
    const allRows = this.$refs.table.selectAll()
    const selectedRows = this.selectedRows
    const inverseRows = allRows.filter(row => !selectedRows.includes(row))
    this.$refs.table.clearSelection()
    inverseRows.forEach(row => this.$refs.table.toggleRowSelection(row))
  },
}

现在，当你调用 `inverseSelection` 方法时，勾选框将会反选当前表格中的行数据。你可以根据自己的需求修改方法的实现，以适应你的业务逻辑。