vue3+Element多选的弹框+如何获取选中数据以及设置默认勾选

在Vue 3和Element Plus中创建一个带有多选的弹框并获取勾选数据，可以通过以下步骤实现：

1. 使用<el-dialog>组件创建弹框。
2. 使用<el-checkbox-group>组件创建多选框。
3. 使用v-model绑定一个响应式数据来获取勾选的值。
4. 使用<el-checkbox>组件为每个选项创建多选框。
5. 通过设置v-model绑定的数组的值来设置默认勾选。

以下是一个简单的示例代码：

<template>
  <el-dialog
    title="多选弹框"
    :visible.sync="dialogVisible"
    width="30%"
  >
    <el-checkbox-group v-model="checkedValues">
      <el-checkbox v-for="item in options" :label="item" :key="item">{{ item }}</el-checkbox>
    </el-checkbox-group>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const dialogVisible = ref(false); // 控制弹框显示的布尔值
    const checkedValues = ref([]); // 存储勾选的值
    const options = ref(['选项A', '选项B', '选项C']); // 多选框的选项
 
    // 设置默认勾选
    // 例如，默认勾选“选项A”和“选项B”
    checkedValues.value = ['选项A', '选项B'];
 
    return {
      dialogVisible,
      checkedValues,
      options,
    };
  },
};
</script>

在这个例子中，dialogVisible控制弹框的显示与隐藏，checkedValues数组用于存储多选框选中的值，options数组包含了所有的选项。通过点击弹框的确定按钮，可以获取并处理checkedValues中的数据。通过设置checkedValues.value的初始值，可以设置默认勾选的选项。