vue3中基于element-plus封装一个表格弹框组件，要求可以单选和多选table数据

在Vue 3中，你可以使用组合式API结合Element Plus来创建一个表格弹框组件，该组件可以支持单选和多选。以下是一个简单的示例：

<template>
  <el-dialog
    :visible="visible"
    @update:visible="(value) => $emit('update:visible', value)"
    title="表格弹框"
    width="600px"
  >
    <el-table
      :data="tableData"
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column property="date" label="日期" width="180"></el-table-column>
      <el-table-column property="name" label="姓名" width="180"></el-table-column>
      <el-table-column property="address" label="地址"></el-table-column>
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="$emit('update:visible', false)">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
 
<script setup>
import { ref } from 'vue';
 
const props = defineProps({
  visible: Boolean,
  tableData: Array
});
 
const selectedRows = ref([]);
 
const emit = defineEmits(['update:visible']);
 
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};
 
const handleRowClick = (row, column, event) => {
  if (column.type === 'selection' && !event.target.checked) {
    const index = selectedRows.value.findIndex(item => item === row);
    if (index > -1) {
      selectedRows.value.splice(index, 1);
    }
  }
};
 
const handleConfirm = () => {
  // 这里可以处理选中数据的逻辑
  console.log(selectedRows.value);
  emit('update:visible', false);
};
</script>

使用该组件时，你需要传入visible属性来控制弹框的显示与隐藏，以及一个tableData数组用于展示表格数据。组件内部使用了Element Plus的el-dialog、el-table和el-table-column组件来构建界面，并通过@selection-change事件来更新选中的行数据。

你可以在父组件中这样使用该组件：

<template>
  <YourTableDialog
    :visible="dialogVisible"
    :table-data="tableData"
    @update:visible="(value) => dialogVisible = value"
  />
</template>
 
<script setup>
import YourTableDialog from './YourTableDialog.vue';
 
const dialogVisible = ref(false);
const tableData = ref([
  // 填充你的表格数据
]);
</script>

确保你已经安装了Element Plus，并在你的项目中正确引入了该组件。这个例子提供了一个简单的框架，你可以根据实际需求对其进行扩展和修改。