[ElementPlus] 超简洁父子弹窗表单 - 常用

省略了很多无关的代码, 使用provide和inject传值

父组件:

<template>
    <div class="default-main ba-table-box">
        <!-- 表格顶部菜单 -->
        <TableHeader
            :buttons="['refresh', 'comSearch', 'quickSearch', 'columnDisplay']"
            :quick-search-placeholder="t('quick Search Placeholder', { fields: t('adminUser.quick Search Fields') })"
        >
            <el-button type="primal" @click="isOpen = true">添加用户</el-button>
        </TableHeader>

        <Table ref="tableRef" />
        <addUser/>
    </div>
</template>

<script setup lang="ts">
import { ref, provide, onMounted } from 'vue'
import addUser from './addUser.vue'

const baTable = new baTableClass(
    new baTableApi('/admin/AdminUser/'),
    {
        pk: 'id',
        column: [
            { type: 'selection', align: 'center', operator: false },
            { label: t('adminUser.id'), prop: 'id', align: 'center', width: 70, operator: 'RANGE', sortable: 'custom' },
            { label: t('operate'), align: 'center', width: 100, render: 'buttons', buttons: optButtons, operator: false },
        ],
        dblClickNotEditColumn: [undefined],
    }
)
// ...
// 弹窗开关
const isOpen = ref(false)
provide('isOpen', isOpen)
</script>

子组件代码 (addUser.vue)

<template>
    <div>
        <el-dialog v-model="isOpen" title="添加用户">
            <el-form :model="form">
                <el-form-item label="登录名">
                    <el-input v-model="form.username" autocomplete="off" placeholder="由英文和数字组成,不可输入中文" />
                </el-form-item>
                <el-form-item label="昵称">
                    <el-input v-model="form.nickname" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.password" autocomplete="off" />
                </el-form-item>
                <el-form-item label="用户组">
                    <el-select v-model="form.group_id" placeholder="请选择用户组">
                        <el-option label="管理员" value="3" />
                        <el-option label="普通用户" value="4" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="isOpen = false">取消</el-button>
                    <el-button type="primary" > 确认</el-button>
                </span>
            </template>
        </el-dialog>

    </div>
</template>

<script setup lang='ts'>
    import { useAdminInfo } from '/@/stores/adminInfo'
    import { reactive, ref, watchEffect, inject } from 'vue'

    import type { UploadInstance} from 'element-plus'
    import { ElNotification} from 'element-plus'
    const upload = ref < UploadInstance > ()

    // el-upload中的属性data, 用来传值, 这里名称要对应
    const form = reactive({
        remark: ''
    })
    
    // 弹窗
    const isOpen = inject('isOpen')
</script>