Vue3 - Element Plus 表格组件 “手动“ 取消/选中勾选列

在Vue3和Element Plus中，如果你想通过代码手动取消或选中表格中的勾选列，你需要对Element Plus的表格组件的勾选列进行操作。Element Plus是Element UI的官方继承版本，它适配了Vue 3。在Element Plus中，可以通过以下步骤来实现手动控制勾选状态：

1. 在`<el-table>`组件中定义列时，为需要进行手动勾选控制的列添加`type="selection"`属性，这样它就会变成一个勾选列。

2. 通过定义一个`ref`来获取表格的引用，这样可以在组件的其他地方通过这个`ref`访问表格实例。

3. 使用表格实例的`setRowSelection`方法来改变指定行的选中状态，或者使用`clearSelection`方法来清空所有的勾选状态。

下面是一个简单的示例代码，演示了如何进行操作：

<template>
  <el-table
    ref="tableRef"
    :data="tableData"
    style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
  <el-button @click="toggleSelect">切换勾选</el-button>
</template>

<script setup>
import { ref } from 'vue';
import { ElTable } from 'element-plus';

const tableData = ref([
  // ... 表格数据
]);

const tableRef = ref(null);

const toggleSelect = () => {
  // 获取表格当前的选中行数据
  const selectedRows = tableRef.value.getCheckedRows();
  if (selectedRows.length > 0) {
    // 如果有选中的行，取消勾选
    tableRef.value.clearSelection();
  } else {
    // 如果没有选中的行，手动勾选第一行
    const firstRow = tableData.value[0];
    const rowIndex = tableData.value.indexOf(firstRow);
    tableRef.value.setRowSelection([rowIndex], true);
  }
};
</script>