The realization of the return value after the pop-up box under Vue+Element selects the value

1. Test environment:

1.VIEW

2.Element

2. Function description:

A selection box pops up, select a record, click OK to return the value of the record to the page

Three, the key code:

1. Parent page:

<template>
<el-button icon="el-icon-add" size="small" type="primary" @click="openDialog">选择</el-button>
<el-dialog title="选择" :visible.sync="dialogVisible" v-if="dialogVisible" center append-to-body>
<Mydialog @close="closeDialog"></Mydialog>
</el-dialog>
</template>
<script>
import Mydialog from './mydialog'
export default{
     methods:{
        openDialog(){
           this.dialogVisible=true;  
        },
        closeDialog(model){
           console.info("选择的结果是:",model);
           this.dialogVisible=false;
        }
     },
     components:{
        Mydialog
     },
     data(){
        return {
          dialogVisible:false
        }
     }
}
</script>

2. Pop-up box page:

<template>
    <el-button type="primary" size="small" @click="closeDialog">取消</el-button>
    <el-button type="primary" size="small" @click="saveDialog">保存</el-button>
</template>
<script>
    export default{
       methods:{
          closeDialog(entity){
             this.$emit('close',entity);
          },
          saveDialog(){
             this.closeDialog(this.model);
          }
       },
       data(){
         return {
            model:{
              id:'',
              name:''
            }
         }
       }
    }
</script>

 

(End of full text)