Vue结合Element Plus获取表格点击行数据及相关方法疑问

问题描述 #

我正在尝试使用Vue结合Element Plus的表格组件实现「点击选中」功能，目前使用row-click事件，但不确定如何获取点击行的数据。请问getSelectionRows()方法是否适用于此场景？如果适用，能否说明该方法返回的数据类型？

相关代码示例 #

<template>
  <el-table
    ref="multipleTableRef"
    row-key="id"
    :data="tableData"
    flexible
    stripe
    style="width: 100%"
    v-loading="tableLoading"
    @selection-change="handleSelectionChange"
    @row-click="clickToSelect"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="ID" label="ID" width="100"> </el-table-column>
    <el-table-column prop="Name" label="商品名称"> </el-table-column>
    <el-table-column label="商品图片">
      <template #default="{ row }">
        <img
          v-if="row.ImageUrls && row.ImageUrls.length > 0"
          :src="row.ImageUrls[0].Url"
          alt="商品图片"
          class="w-[90px] aspect-auto-[1]"
        />
        <span v-else>无图片</span>
      </template>
    </el-table-column>
    <el-table-column prop="UnitPrice" label="价格"> </el-table-column>
  </el-table>
</template>
<script setup>
  const multipleTableRef = ref(); // 表格实例引用
  const multipleSelection = ref([]); // 选中的行数据

  // row-click事件会传递row（行数据）、column（列数据）、event（事件对象）三个参数
  const clickToSelect = (row, column, event) => {
    multipleTableRef.value.toggleSelection(row);
  };

  // 批量切换选中状态的辅助函数
  const toggleSelection = (rows, ignoreSelectable = false) => {
    if (rows) {
      rows.forEach(row => {
        multipleTableRef.value.toggleRowSelection(row, undefined, ignoreSelectable);
      });
    } else {
      multipleTableRef.value.clearSelection(); // 清空选中
    }
  };

  const handleSelectionChange = val => {
      multipleSelection.value = val;
    };
</script>

问题解答 #

1. 获取点击行的数据 #

你不需要额外方法，row-click事件的回调函数第一个参数row就是当前点击行的完整数据对象，直接使用即可。比如你代码里的clickToSelect函数已经拿到了这个row并用于切换选中状态，这部分逻辑是正确的。

2. getSelectionRows()的适用场景 #

这个方法不是用来获取单次点击的行，而是用来获取表格中所有被选中的行数据。如果你需要在某个操作（比如批量提交、批量删除）时拿到所有选中的行，这个方法完全适用；但如果只是需要当前点击的那一行数据，直接用row-click的row参数更直接高效。

3. getSelectionRows()的返回类型 #

它返回一个数组，数组中的每一项都是你表格数据源tableData中的单个行对象，结构和tableData的元素完全一致。比如你的tableData是包含ID、Name、ImageUrls等字段的对象数组，返回的数组里的每一项就是对应结构的对象。

另外，你代码中通过handleSelectionChange把选中行赋值给multipleSelection，这个变量和调用multipleTableRef.value.getSelectionRows()拿到的结果是等价的，可根据实际场景选择使用。

内容的提问来源于stack exchange，提问作者richiea1y