乐趣区

关于前端:vue-插槽的使用

父组件内的代码:

<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>
退出移动版