Vue+elementUi使用el-dialog弹框

使用elementUi组件库<el-dialog></el-dialog>

首先将子组件引入父组件中并且下放也要import进来: 

 还要在components中注册子组件,并且在props中添加如下图:

新增watch方法监听;其中的restData(){}是自己定义的在每次关闭弹框时重置弹框中数据的方法,

此外return中先将copyEmployeeVisible置为false即默认不展示:

当然父页面中其他地方需要触发弹出或者关闭弹框时只需要改变this.copyEmployeeVisible = true / false 即可;

子组件中: 

 @close="$emit('update:show',false)"是在点击弹框以外的地方弹框会消失。

 

同样在子组件中触发关闭弹框时改变this.copyEmployeeVisible =  false 即可;

父子组件传值还为尝试,先记录再补充~:D

 

 

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你在Vue3和ElementUI使用el-select组件的multiple属性进行单选或多选,并且想要在点击编辑按钮后,弹出一个弹框来显示选择的结果,可以使用ElementUIDialog组件来实现。具体步骤如下: 1. 在父组件中,给el-select绑定一个v-model,用来存储选择的值,并在点击编辑按钮时,打开一个Dialog弹框,用来显示选择结果。 2. 将选择结果传递给Dialog弹框,在弹框中显示选择结果。 下面是一个简单的示例代码: 父组件: ```html <template> <div> <el-select v-model="selected" multiple> <el-option label="Option 1" value="1"></el-option> <el-option label="Option 2" value="2"></el-option> <el-option label="Option 3" value="3"></el-option> </el-select> <el-button @click="edit">编辑</el-button> <el-dialog :visible.sync="dialogVisible" title="选择结果"> <div v-for="item in selected" :key="item">{{ item }}</div> </el-dialog> </div> </template> <script> import { ref } from 'vue' export default { setup() { const selected = ref([]) // 存储选择结果的数组 const dialogVisible = ref(false) // 控制Dialog弹框显示的变量 const edit = () => { // 打开Dialog弹框 dialogVisible.value = true } return { selected, dialogVisible, edit } } } </script> ``` 在父组件中,我们使用Vue3的Composition API来定义了存储选择结果的数组和控制Dialog弹框显示的变量,并在edit方法中,打开了Dialog弹框。 在Dialog弹框中,我们使用了v-for来遍历选择结果数组,将每个选择结果显示在弹框中。 注意,我们使用了v-bind.sync来将dialogVisible属性和Dialog组件中的visible属性进行了双向绑定,这样就可以在父组件中控制Dialog弹框的显示和隐藏。 子组件: ```html <template> <div> <el-select v-model="selected" :multiple="true"> <el-option label="Option 1" value="1"></el-option> <el-option label="Option 2" value="2"></el-option> <el-option label="Option 3" value="3"></el-option> </el-select> </div> </template> <script> import { defineProps, ref, watch } from 'vue' export default { props: { selected: { type: Array, default: () => [] } }, setup(props) { const selected = ref(props.selected) // 存储选择结果的数组 // 监听父组件传递的选择结果,更新子组件的选择结果 watch(() => props.selected, (newValue) => { selected.value = newValue }) return { selected } } } </script> ``` 在子组件中,我们使用了props来接收父组件传递的v-model的值,并在el-select中绑定这个值,用来实现选择功能。 在父组件中,我们使用v-bind.sync来将父组件中的selected属性和子组件中的selected属性进行了双向绑定,这样就可以实现在父组件中点击编辑后,Dialog弹框内部的回显数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值