el-dialog弹窗和组件的使用

记录使用el-dialog实现信息页面的 新增、修改 、查看 操作

1.介绍el-dialog弹窗以及组件的使用

   <el-button
     type="primary"
     size="mini"
     @click="handleAdd('新增')">新增</el-button>
     //el-dialog弹窗里 要实现 新增、修改 、查看三个操作   所以弹窗需要根据点击显示对应操作的标题

    <i class="el-icon-edit" @click="handleEdit( scope.row.pid,'编辑')"></i>
    <i class="el-icon-document" @click="handleEdit( scope.row.pid,'详情')"></i>
    <el-dialog
    :title="operationType"  //设置弹窗显示的名字
    v-model="dialogVisible" //设置绑定 控制打开关闭
    :destroy-on-close="true" //弹窗右侧是否显示  X 
    :visible.sync="dialogVisible"
    width="73%" //设置弹窗宽度
    top="5%"	//设置弹窗距离页面顶部位置
    :before-close="handleClose"  //点击  X  关闭弹窗方法
    >
      //自定义的组件页面  
      <good v-if="dialogVisible" :operation-type="operationType" :operation-code="operationCode"  //添加 v-if="dialogVisible" 可以解决组件传参不刷新问题
      @hideDialog="
      hideDialog() 
      getUsers()" //组件页面 新增完之后 点击 提交按钮  触发hideDialog 关闭弹窗并刷新列表
       />
  </el-dialog>

使用组件之前需要先声明再注册   
<script>

  import good from './addDs.vue'  // 声明 组件
  export default {
    components: {  // 注册 组件
     good 
    },
    data() {
      return {
        dialogVisible:false, //弹窗状态设置关闭
        operationType:'',  //标题
        operationCode:'', //传参的code
      }
     }


 methods:{
		 // 编辑or详情
      handleEdit( pid,tt) {
        this.operationType = tt;
        this.operationCode = pid.toString();
        //点击按钮弹窗打开
        this.dialogVisible =true
      },
      // 新增
      handleAdd(tt){
	      //tt接受参数
        this.operationType = tt;
          //点击按钮弹窗打开
        this.dialogVisible =true
      },
      // 子组件提交传值 关闭弹窗
      hideDialog() {
        this.dialogVisible = false;
      },
      //addDs.vue页面 子组件向父传值this.$emit   关闭弹窗传参
     // this.$emit('hideDialog',this.operationType);

 }

2. el-dialog嵌套el-dialog会出现第二个不高亮显示问题解决方法：

给第二个el-dialog标签 添加 append-to-body