需要使用多个dialog对话框时
场景：crud中添加和修改数据需要两个对话框，结构类似，但所需要调用的axios的方法不同，因此使用两个对话框进行
解决方法：
①在两个不同的vue文件中分别写一个dialog对话框
②（推荐）在一个vue文件中写俩不同的对话框，每个对话框对应一个不同的:visible.sync
只需要将第一个复制一份，放到第一个dialog下面或者合适的位置。修改el-dialog标签属性中:visible.sync的值，在script的return里再定义修改的值为false.在给修改按钮绑定点击显示dialog框即可，但是修改需要回显数据，所以最好点击事件绑定一个函数，传入对应要修改的对象，在函数里面进行开关和给绑定的数据模型赋值，两个dialog共用一个数据模型即可
例子：
1 <!-- 修改员工信息所需要的dialog对话框 --> 2 <el-dialog title="修改员工信息" :visible.sync="dialogFormVisible1">
此处的：visible.sync可以修改，每个dialog对应一个名字，通过控制这个名字的true和false就可控制对话框的显示 3 <el-form :model="form"> 4 5 <el-form-item label="员工姓名" :label-width="formLabelWidth"> 6 <el-input v-model="form.name" autocomplete="off"></el-input> 7 </el-form-item> 8 9 10 <el-form-item label="员工性别"> 11 <el-select v-model="form.sex" placeholder="请选择员工性别"> 12 <el-option label="男" value="男"></el-option> 13 <el-option label="女" value="女"></el-option> 14 </el-select> 15 </el-form-item> 16 17 <el-form-item label="员工生日" :label-width="formLabelWidth"> 18 <el-input v-model="form.birthday" autocomplete="off"></el-input> 19 </el-form-item> 20 <el-form-item label="所属部门" :label-width="formLabelWidth"> 21 <el-input v-model="form.department" autocomplete="off"></el-input> 22 </el-form-item> 23 </el-form> 24 <div slot="footer" class="dialog-footer"> 25 <el-button @click="dialogFormVisible1 = false">取 消</el-button> 26 <el-button type="primary" @click=updateEmp()>确 定</el-button> 27 </div> 28 </el-dialog>