element-plus 多选表格取消选中

要取消 element-plus 多选表格中的选定行，请使用以下方法之一：

1. 点击选定行中的复选框来取消选中。

2. 点击表格中的任意行并按住 Shift 键，从选定的行中取消选中行。

3. 在代码中使用内置的方法来取消选定行。例如，你可以使用 `toggleRowSelection` 方法来切换行的选中状态，或者使用 `clearSelection` 方法来清除所有选中的行。以下是示例代码：

<template>
  <el-table
    :data="tableData"
    :row-key="row => row.id"
    :selectable="row => row.status === 'active'" // 只有状态为 active 的行才能选中
    v-model="selectedRows"
    style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Name">
    </el-table-column>
    <el-table-column
      prop="status"
      label="Status">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'John Doe', status: 'active' },
        { id: 2, name: 'Jane Doe', status: 'inactive' },
        { id: 3, name: 'Bob Smith', status: 'active' },
        { id: 4, name: 'Alice Johnson', status: 'inactive' }
      ],
      selectedRows: []
    }
  },
  methods: {
    deselectRow(row) {
      this.$refs.table.toggleRowSelection(row, false) // 取消选中行
    },
    clearSelection() {
      this.$refs.table.clearSelection() // 清除所有选中的行
    }
  }
}
</script>

在上面的代码中，我们使用 `toggleRowSelection` 方法来取消选中行，该方法接受两个参数：要取消选中的行和一个布尔值（默认为 `true`），表示是否选中。我们还定义了一个 `deselectRow` 方法，该方法在点击行时调用，从选定的行中取消选中行。

我们还使用 `clearSelection` 方法来清除所有选中的行。该方法不接受参数，只需调用即可。注意，我们需要使用 `v-model` 指令将选定行的数组绑定到 `selectedRows` 数据属性上，这样我们才能在代码中访问它。