vue3获取选中的el-table行数据方式

<template>
  <el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
    style="width: 100%"
    ref="multipleTable"
  >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      property="date"
      label="日期"
      width="120">
    </el-table-column>
    <el-table-column
      property="name"
      label="姓名"
      width="120">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

<script setup>
import { ref } from 'vue';
 
const tableData = ref([/* 你的数据 */]);
const selectedRows = ref([]);
 
const handleSelectionChange = (val) => {
  selectedRows.value = val; // val是当前选中行的数组
};
</script>

<template>
  <el-table
    :data="tableData"
    ref="multipleTableRef"
    style="width: 100%"
  >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <!-- 列定义 -->
  </el-table>
  <el-button @click="getSelectionRows">获取选中行</el-button>
</template>

<script setup>
import { ref } from 'vue';
import { ElTable } from 'element-plus'; // 或 'element-ui' 取决于你使用的库版本和包名
 
const tableData = ref([/* 你的数据 */]);
const multipleTableRef = ref(null); // 通过ref获取组件实例
 
const getSelectionRows = () => {
  if (multipleTableRef.value) { // 检查ref是否已正确引用组件实例
    const selectedRows = multipleTableRef.value.selection; // 获取选中行数据数组
    console.log(selectedRows); // 处理或显示选中行数据
  }
};
</script>