vue3中使用element-plus的弹窗组件，引用复选框组件双向绑定值不生效？

Question

vue3中使用element-plus的弹窗组件，引用复选框组件双向绑定值不生效？
代码如下：

<template>
    <el-dialog v-model="dialogVisible" title="新增角色" width="600px">

        <el-form ref="roleRef" :rules="roleRules" :model="roleForm" label-width="120px">
            <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="roleForm.roleName" placeholder="请输入角色名称" />
            </el-form-item>
            <el-form-item label="权限字符" prop="rolePerm">
                <el-input v-model="roleForm.rolePerm" placeholder="请输入权限字符" />
            </el-form-item>
            <el-form-item label="状态" prop="enabled">
                <el-radio-group v-model="roleForm.enabled">
                    <el-radio :label="item.v" v-for="item in statusCheck" :key="item.v">{{ item.name }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="菜单权限">
                <div class="tree-menu">
                    <el-checkbox label="展开/折叠" v-model="permission.openAll" @change="toggleOpenAll" />
                    <el-checkbox label="全选/全不选" v-model="permission.selectAll" @change="toggleSelectAll" />
                    <el-checkbox label="父子(联动/不联动)" v-model="permission.linkage" />
                    <el-tree class="tree-box mt10" ref="menuTreeRef" :props="permission.treeProps"
                        :data="permission.treeList" :check-strictly="!permission.linkage"
                        :default-expand-all="permission.openAll" show-checkbox node-key="id"
                        @check-change="handleCheckChange" />
                </div>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" maxlength="200" v-model="roleForm.descript" placeholder="请输入内容" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submit">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, onBeforeMount } from 'vue'
import { roleAdd } from '@/api/system/role'
import { menuTree } from "@/api/system/menu";

const roleForm = reactive({
    roleName: "",//角色名称
    rolePerm: "",//角色权限编码
    enabled: '1',//是否启用（0：禁用；1：启用）
    descript: '',//描述
    permissionIds: []//菜单ID
})
const roleRules = {
    roleName: [{ required: true, trigger: "blur", message: "请输入角色名称" }],
    rolePerm: [{ required: true, trigger: "blur", message: "请输入角色权限编码" }],
};
// 展开
const toggleOpenAll = (e) => {
    permission.openAll = e
    console.log('展开', permission.openAll);
}
// 全选
const toggleSelectAll = (e) => {
    console.log('全选', e);
    permission.selectAll = e;
}
// 权限树dom
const menuTreeRef = ref();
// 控制菜单树
const permission = reactive({
    openAll: false,
    selectAll: false,
    linkage: true,
    treeList: [],
    treeProps: {
        label: 'name'
    }
})
const handleCheckChange = (data,
    checked,
    indeterminate) => {
    console.log('选择一项', data, checked, indeterminate)

}
onBeforeMount(async () => {
    let res = await menuTree()
    permission.treeList = res.data
    console.log('菜单树', res.data);
})
const statusCheck = reactive([{ name: '启用', v: '1' }, { name: '禁用', v: '0' }])

// console.log(roleForm.enabled);
const checkList = ref(['Option A'])
const dialogVisible = ref(true)

const show = () => {
    dialogVisible.value = true
}
const roleRef = ref(null);
const emit = defineEmits(['myclick'])
const submit = () => {
    roleRef.value.validate(async (valid) => {
        if (valid) {
            let res = await roleAdd(roleForm)
            console.log('新增成功', res);
            dialogVisible.value = false
            ElMessage.success('新增成功')
            emit('myclick')
        } else {
            console.log('error submit!')
            return false
        }
    })
}


// 向外暴露属性和方法
defineExpose({
    dialogVisible,
    show,

});

</script>

<style lang="scss" scoped>
.tree-menu {
    width: 100%;
}

.tree-box {
    border: 1px solid #dcdfe6;
}
</style>

Answer 1

【相关推荐】

• 你可以看下这个问题的回答https://ask.csdn.net/questions/7777070
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：vue3使用和汉化element-plus组件库+图标
• 除此之外, 这篇博客: Vue3+Element-Plus 实现添加用户表单中自定义验证规则的功能 三七中的 1.使用自定义验证规则场景：当表单中，需要对个别输入项进行自定义验证规则时，例如，手机号、邮箱验证 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^