父组件内的代码:
<el-dialog :title="editType === 'mobile' ? '批改手机号' : editType === 'room' ? '批改寓居房间' : editType === 'card' ? '批改门卡' : editType === 'finger' ? '批改指纹' : ''" :visible.sync="dialogVisible" v-if="dialogVisible" width="30%" :show-close="false"> <EditRoom ref="editRoom" :editInfo="editInfo" v-if="editType === 'room'"> <div slot-scope="editRoomInfo" slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">勾销</el-button> <el-button type="primary" @click="submitEditRoom(editRoomInfo)" :loading="editBtnLoading" :disabled="editBtnLoading">立刻批改</el-button> </div> </EditRoom></el-dialog>
子组件内的应用:
<div class="permission-open-edit-room" v-loading="pageLoading" element-loading-text="拼命加载中..."><el-form ref="editRoomForm" :model="form" :rules="formRules" label-width="80px"> <el-form-item label="区域名称" prop="region_id"> <el-select v-model="form.region_id" placeholder="请抉择区域名称" filterable @change="regionChange"> <el-option v-for="item in regionArr" :key="item.region_id" :value="item.region_id" :label="item.region_name"></el-option> </el-select> </el-form-item> <el-form-item label="楼栋名称" prop="floor_id"> <el-select v-model="form.floor_id" placeholder="请抉择楼栋名称" filterable clearable @change="buildingChange"> <el-option v-for="item in buildingArr" :key="item.floor_id" :value="item.floor_id" :label="item.floor_name"></el-option> </el-select> </el-form-item> <el-form-item label="楼层号" prop="layer_id"> <el-select v-model="form.layer_id" placeholder="请抉择楼层号" filterable clearable @change="floorChange"> <el-option v-for="item in floorArr" :key="item.layer_id" :value="item.layer_id" :label="item.layer_name"></el-option> </el-select> </el-form-item> <el-form-item label="房间号" prop="room_id"> <el-select v-model="form.room_id" placeholder="请抉择房间号" filterable clearable> <el-option v-for="item in roomArr" :key="item.room_id" :value="item.room_id" :label="item.room_name"></el-option> </el-select> </el-form-item></el-form><slot name="footer" :data="form"></slot></div>