vue3 element-plus 组件table表格 勾选框回显（初始化默认回显）完整静态代码

在Vue 3和Element Plus中，要实现表格（Table）组件的勾选框回显（初始化默认回显），你需要使用el-table组件的:data属性绑定表格数据，并且在数据对象中使用el-table-column组件的type="selection"来显示勾选框。此外，你可以通过设置数据对象中的selection属性来控制哪些行是被选中的。

以下是一个简单的例子，演示如何在Vue 3和Element Plus中实现表格勾选框的回显：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <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>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([
  {
    id: 1,
    date: '2016-05-02',
    name: 'John',
    selection: true // 设置为true来默认选中
  },
  {
    id: 2,
    date: '2016-05-04',
    name: 'Smith',
    selection: false // 设置为false来默认不选中
  },
  // 其他数据项
]);
 
const handleSelectionChange = (selection) => {
  console.log(selection); // 这里可以获取到当前选中的行
};
</script>

在这个例子中，tableData是一个响应式引用，包含了表格的数据。每个数据对象都有一个selection属性，当设置为true时，对应的行将默认被勾选。handleSelectionChange方法用于处理选中行的变化。当用户选择或取消选择行时，该方法会被调用，并输出当前选中的行。

请注意，在实际应用中，你可能需要根据实际的业务逻辑来动态地设置和获取选中的行。上述代码提供了一个基本的框架，展示了如何在Vue 3和Element Plus中实现表格勾选框的默认回显。