vue + element-ui dialog 弹出框使用

构建页面时,需要按钮弹出一个新的页面进行编辑,此时需要用到dialog弹出框,考虑复用,把弹出框单独提出来使用。

1.父组件页面一个按钮,dialogTableVisible默认false,隐藏。addUser触发,

 

 添加
      
        
      
 data() {
      return {
        dialogTableVisible: false,
        }
    }
 addUser(){
          this.dialogTableVisible=true;//默认页面不显示为false,点击按钮将这个属性变成true
      },

 

2.子组件编写


3.父组件中引用子组件

 import Add  from './Add.vue';
 components: {
      Add
    }

4.效果图

vue + element-ui dialog 弹出框使用_第1张图片

 

你可能感兴趣的:(vue)