element-plus中多选table 点击单行或者复选框都可勾选表格

<template>
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%; text-align: center"
    @selection-change="handleSelectionChange"
    @row-click="handleRowChick"
    :header-cell-style="{
      height: '52px',
      color: '#333',
      textAlign: 'center',
    }"
    :cell-style="{ textAlign: 'center', height: '52px' }"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="工号"></el-table-column>
    <el-table-column label="手机号/邮箱" show-overflow-tooltip />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" link @click="goEditMember(scope)">
          设置
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
const tableData = ref([{ name: '张先生', id: 1 }])
const multipleSelection = ref([])
const multipleTableRef = ref()
// 点击复选框
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
// 点击某行控制复选框选中与否
const handleRowChick = (row) => {
  const selected = multipleSelection.value.some((item) => item.id === row.id)
  if (!selected) {
    multipleSelection.value.push(row)
    multipleTableRef.value.toggleRowSelection(row)
  } else {
    const finArr = multipleSelection.value.filter((item) => {
      return item.id !== row.id
    })
    multipleSelection.value = finArr
    multipleTableRef.value.toggleRowSelection(row, false)
  }
}
</script>