elementplus el-table多选框勾选回显

Element Plus 的 `el-table` 组件提供了一个强大的数据展示和交互功能，其中包含内置的多选功能。当你需要在表格中实现多选框勾选并回显已选择的数据时，可以按照以下步骤操作：

1. 首先，在`<template>`部分，为每一行添加一个多选框 (`el-checkbox`) 和一个复选状态绑定的属性，比如 `selected`：

<template>
  <el-table :data="tableData">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column property="name" label="姓名"></el-table-column>
    <!-- 添加更多列 -->
    <el-table-column property="selected" type="index" label="选择" width="60">
      <template slot-scope="scope">
        <el-checkbox v-model="scope.row.selected"></el-checkbox>
      </template>
    </el-table-column>
  </el-table>
</template>

2. 在 `script` 部分，你需要在数据(`data`)中初始化 `tableData` 并维护已选择的数据。当用户点击多选框时，数据状态会自动更新：

<script setup>
import { ref } from 'vue';

const tableData = ref([{ name: '张三', selected: false }, ...]); // 数据列表

// 可以添加一个方法处理多选事件，如获取选中项
const handleSelectionChange = (row) => {
  console.log('当前选中行:', row);
};

// 当前选中行的数组
const selectedRows = ref([]);

// 更新已选中的数据
onMounted(() => {
  selectedRows.value = tableData.value.filter((item) => item.selected);
});

// 监听表格的选择变化
watch(selectedRows, (newSelectedRows) => {
  tableData.value.forEach((item, index) => {
    item.selected = newSelectedRows.includes(index);
  });
});
</script>