vue3 el-table回显选中的数据

在Vue 3中，使用Element Plus（Element UI的继任者）的<el-table>组件时，如果你想回显选中的数据，可以通过ref属性和:data属性来实现。

首先，确保你已经在项目中安装并正确配置了Element Plus。

下面是一个简单的例子，展示如何在<el-table>中显示选中的行数据：

<template>
  <el-table
    :data="tableData"
    ref="tableRef"
    @selection-change="handleSelectionChange"
    style="width: 100%"
  >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
  <!-- 显示选中的数据 -->
  <div v-if="selectedRows.length">
    选中的数据：{{ selectedRows }}
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([
  // 填充你的数据
]);
 
const selectedRows = ref([]);
 
const tableRef = ref(null);
 
const handleSelectionChange = (val) => {
  selectedRows.value = val;
};
</script>

在这个例子中，tableData是表格的数据源，handleSelectionChange方法用于处理选择项的变化，把当前选中的行保存在selectedRows数组中。通过ref属性tableRef，你可以引用<el-table>组件，并获取到当前选中的行。

在模板中，<el-table>组件的@selection-change事件绑定了handleSelectionChange方法，以便在选中项变化时更新selectedRows。最后，通过v-if指令和selectedRows数组的长度，可以判断是否有选中的数据，并显示出来。