父组件内的代码:
<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>