Element Plus 表格点击行任意位置选中当前行，再次点击当前行取消选中，包含（单行选择和多行选择）

在 Element Plus 表格组件中，要实现点击行任意位置选中当前行，再次点击取消选中当前行的功能，可以通过监听表格行(tr)的点击事件来实现。以下是一个简单的示例代码：

<template>
  <el-table
    :data="tableData"
    @row-click="handleRowClick"
    :highlight-current-row="true"
    style="width: 100%"
  >
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        // ...更多数据
      ],
      currentRow: null,
    };
  },
  methods: {
    handleRowClick(row, column, event) {
      if (this.currentRow === row) {
        this.currentRow = null;
      } else {
        this.currentRow = row;
      }
    },
  },
};
</script>

在这个示例中，我们使用了@row-click事件来监听行的点击，并在handleRowClick方法中处理点击事件。如果当前点击的行就是已选中的行，则取消选中；否则选中该行。:highlight-current-row="true"确保了表格行的高亮效果。

这样，用户点击表格的任意位置都可以选中或取消选中行，满足了需求。