Vue3 - Element Plus 表格组件 “手动“ 取消/选中勾选列，并同步更新表格复选框 UI 状态

在Vue3中，Element Plus的表格组件`el-table`提供了丰富的API，如果你想实现手动取消或选择某一行的勾选状态，同时更新表格中的复选框UI，可以按照以下步骤操作：

1. 首先，确保你已经安装了Element Plus并引入了相关的表单组件，如`<el-checkbox>`。

2. 给表格数据的每一项添加一个表示是否被选中的属性，比如`selected`。例如：

data() {
  return {
    tableData: [
      { id: 1, name: 'Row 1', selected: false },
      //...
    ]
  }
}

3. 在表格的行模板（template）中，你可以使用`v-model`绑定到每个数据项的`selected`属性，并显示一个`el-checkbox`：

<el-table-column type="selection" width="55"></el-table-column>
<template slot-scope="scope">
  <el-checkbox v-model="scope.row.selected">选择</el-checkbox>
</template>

这里的`type="selection"`用于创建一个默认的选择列，`v-model`会监听该值的变化。

4. 当你需要手动修改某个行的选中状态时，可以在处理函数（如点击事件）中更新对应的`selected`属性：

methods: {
  toggleSelection(row) {
    this.$set(row, 'selected', !row.selected);
    // 如果你想同步所有选中状态，可以遍历tableData并调整相应选中状态
    this.tableData.forEach(item => item.selected = row.selected);
  }
}

现在，当你调用`toggleSelection(row)`方法时，对应行的状态将改变，表格的复选框状态也会同步更新。