问题:
使用vue+ts+element-plus练习,在使用el-dialog时遇到问题。
问题1:
是子组件为el-dialog,父组件调用子组件弹出对话框。
因为element-plus中el-dialog的v-model无法赋值为props,即无法直接使用父组件的传值。所以在子组件中增加变量赋值给v-model,watch父组件的传值来改变dialogFormVisible的值,来达到显示、关闭对话框的效果。
问题2:
关闭的时候,在弹窗内部关闭事件里写了控制弹窗开关的属性为false,结果关闭之后就再也打不开了
百度下,应该是弹窗无法自己关闭自己,通过$emit触发父组件中弹窗开关的属性为false就可以解决
父组件:
<dialogForm :dialogFormVisible="config.dialogFormVisible" :data="config.tableData" @saveBtn="saveBtn" @close-dialog="config.dialogFormVisible= false"></dialogForm>
const saveBtn=(form:any)=>{
console.log(form)
config.dialogFormVisible=false
}
子组件
//html
<el-dialog v-model="config.dialogFormVisible" title="修改详情" width="60%" @close="$emit('close-dialog')">
<template #footer>
<span class="dialog-footer">
<el-button @click="$emit('close-dialog')">取消</el-button>
<el-button type="primary" @click="saveBtn"> 保存入库 </el-button>
</span>
</template>
</el-dialog>
//js
const emit = defineEmits(['saveBtn'])
const props=defineProps({
dialogFormVisible:Boolean,
data:Array
})
let config=reactive({
dialogFormVisible:false
})
const saveBtn=()=>{
emit('saveBtn','xxxxxx')
}
watch(() => props.dialogFormVisible,() => {
config.dialogFormVisible = props.dialogFormVisible;
});