实现ElementUI表格点击某一行选中取消对应的复选框

需求：项目中需要做到除了勾选表格第一列勾选框去选中/取消数据外，还要通过点击该行的任何地方，都可以选中/取消到这条数据，具体操作如下：

1.首先给<el-table>添加 ref='multipleTableRef' 和 @row-click="handleClickTableRow"

// 我只展示跟本需求相关的属性，其他属性自行根据要求添加
<el-table 
    ...... 
    ref="multipleTable" 
    @row-click="handleClickTableRow">
    ......
</el-table>

2.以下为完整的vue3+ts的写法，主要是handleClickTableRow方法的书写

setup() {
  const multipleTableRef = ref<InstanceType<typeof ElTable>>();
  const state = reactive({
    // 模拟表格数据
    tabledata: [
      {
        date: "2016-05-03",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-02",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-04",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
    ],
    // 用于存放已选的数据
    list: [] as any,
  });
  // 点击表格某一行实现选中和取消复选框的方法
  const handleClickTableRow = (row: any) => {
    // 判断本行数据是否已选择
    const index = state.list.findIndex((r: any) => r.date == row.date);
    // 若未选择则将复选框改为选中状态，并将本行数据添加至list
    if (index == -1) {
      multipleTableRef.value!.toggleRowSelection(row, true);
      state.list.push(row);
    } else {
    // 若已选择则取消复选框的选中状态，并将本行数据从list中删除
      multipleTableRef.value!.toggleRowSelection(row, false);
      state.list.splice(index, 1);
    }
  };
  return {
    multipleTableRef，
    ...toRefs(state),
    handleClickTableRow,
  };
}