在elemenUI基础上，开发面板级联

在elemenUI基础上，开发面板级联

最近开发的项目需要做图中左边这样的级联效果，但是elementUI提供的面板级联案例无法满足项目所需要的功能，所以自己手写一个

现附上代码记录一下，代码是静态页面，数据都是假的，并且有些数据绑定是随便绑定的一个值，交互没有做，纯粹记录一下

<template>
  <div class="campus">
    <el-row :gutter="24">
      <el-col :span="14">
        <div style="max-height: calc(100vh - 60px);background-color: #ffffff;overflow: auto">
          <div class="cascade_content">
            <div class="cascade_col">
              <div class="cascade_header">
              <span>院区 <el-button style="float: right; padding: 0;line-height: 57px" type="text"><i
                class="el-icon-search"></i></el-button></span>
                <span><el-button style="padding: 3px 0" type="text">新增</el-button>&nbsp;&nbsp;共计：{{campus.length}}个</span>
              </div>
              <div class="cascade_item" v-for="(item,index) in campus" :key="index" :class="item.id===current.campus?'is-choose':''" @click="chooseItem('campus',item)">
                <div>{{item.name}}</div>
                <div>
                  <el-button style="padding: 3px 0;" type="text"><i
                    class="el-icon-edit"></i></el-button>
                  <el-button style="padding: 3px 0" type="text"><i
                    class="el-icon-delete"></i></el-button>
                </div>
              </div>
            </div>
            <div class="cascade_col">
              <div class="cascade_header">
              <span>建筑物 <el-button style="float: right; padding: 0;line-height: 57px" type="text"><i
                class="el-icon-search"></i></el-button></span>
                <span><el-button  v-show="building.length" style="padding: 3px 0" type="text">新增</el-button>&nbsp;&nbsp;共计：{{building.length}}个</span>
              </div>
              <div class="cascade_item" v-for="(item,index) in building" :key="index" :class="item.id===current.building?'is-choose':''" @click="chooseItem('building',item)">
                <div>{{item.name}}</div>
                <div>
                  <el-button style="padding: 3px 0;" type="text"><i
                    class="el-icon-edit"></i></el-button>
                  <el-button style="padding: 3px 0" type="text"><i
                    class="el-icon-delete"></i></el-button>
                </div>
              </div>
            </div>
            <div class="cascade_col">
              <div class="cascade_header">
              <span>楼层 <el-button style="float: right; padding: 0;line-height: 57px" type="text"><i
                class="el-icon-search"></i></el-button></span>
                <span><el-button  v-show="floor.length" style="padding: 3px 0" type="text">新增</el-button>&nbsp;&nbsp;共计：{{floor.length}}个</span>
              </div>
              <div class="cascade_item" v-for="(item,index) in floor" :key="index" :class="item.id===current.floor?'is-choose':''" @click="chooseItem('floor',item)">
                <div>{{item.name}}</div>
                <div>
                  <el-button style="padding: 3px 0;" type="text"><i
                    class="el-icon-edit"></i></el-button>
                  <el-button style="padding: 3px 0" type="text"><i
                    class="el-icon-delete"></i></el-button>
                </div>
              </div>
            </div>
            <div class="cascade_col">
              <div class="cascade_header">
              <span>房间 <el-button style="float: right; padding: 0;line-height: 57px" type="text"><i
                class="el-icon-search"></i></el-button></span>
                <span><el-button v-show="room.length" style="padding: 3px 0" type="text">新增</el-button>&nbsp;&nbsp;共计：{{room.length}}个</span>
              </div>
              <div class="cascade_item" v-for="(item,index) in room" :key="index" :class="item.id===current.room?'is-choose':''" @click="chooseItem('room',item)">
                <div>{{item.name}}</div>
                <div>
                  <el-button style="padding: 3px 0;" type="text"><i
                    class="el-icon-edit"></i></el-button>
                  <el-button style="padding: 3px 0" type="text" ><i
                    class="el-icon-delete"></i></el-button>
                </div>
              </div>
            </div>
          </div>
        </div>

      </el-col>
      <el-col :span="10">
        <el-card class="right_box" shadow="never">
          <div slot="header" class="clearfix">
            <span class="header_title">房间信息</span>
            <template v-if="!isEdit">
              <el-button style="float: right; padding: 3px 0" type="text" @click="deleteTree"><i
                class="el-icon-delete"></i></el-button>
              <el-button style="float: right; padding: 3px 0;margin-right: 20px" type="text" @click="editRoomDetail"><i
                class="el-icon-edit"></i></el-button>
            </template>
            <template v-else>
              <el-button size="mini" style="float: right;" @click="editRoomDetail">取消</el-button>
              <el-button size="mini" style="float: right;margin-right: 10px" type="primary" @click="saveEdit">保存
              </el-button>
            </template>
          </div>
          <div class="text item">
            <el-form ref="form" :model="roomDetail" label-width="200px" size="mini" label-position="left">
              <div class="form_title">基础信息</div>
              <el-form-item label="房间名称">
                <span slot="label">房间名称 ： </span>
                <el-input v-if="isEdit" v-model="roomDetail.name"></el-input>
                <span v-else class="value">{{roomDetail.name|| '-'}}</span>
              </el-form-item>
              <el-form-item label="房间编号">
                <span slot="label">房间编号 ： </span>
                <el-input v-if="isEdit" v-model="roomDetail.num"></el-input>
                <span v-else class="value">{{roomDetail.num|| '-'}}</span>
              </el-form-item>
              <el-form-item label="房间类型">
                <span slot="label">房间类型 ： </span>
                <el-select v-if="isEdit" v-model="roomDetail.type" placeholder="请选择">
                  <el-option  label="房间" value="房间"></el-option>
                  <el-option  label="区域" value="区域"></el-option>
                </el-select>
                <span v-else class="value">{{roomDetail.num|| '-'}}</span>
              </el-form-item>
              <el-form-item label="使用科室">
                <span slot="label">使用科室 ： </span>
                <el-select v-if="isEdit" v-model="roomDetail.useType" placeholder="请选择">
                  <el-option  label="房间" value="房间"></el-option>
                  <el-option  label="区域" value="区域"></el-option>
                </el-select>
                <span v-else class="value">{{roomDetail.useType|| '-'}}</span>
              </el-form-item>
              <el-form-item label="面积">
                <span slot="label">面积：</span>
                <el-input v-if="isEdit" v-model="roomDetail.area"></el-input>
                <span v-else class="value">{{roomDetail.area|| '-'}}</span>
              </el-form-item>
              <el-form-item label="朝向">
                <span slot="label">朝向 ： </span>
                <el-select v-if="isEdit" v-model="roomDetail.direction" placeholder="请选择">
                  <el-option  label="房间" value="房间"></el-option>
                  <el-option  label="区域" value="区域"></el-option>
                </el-select>
                <span v-else class="value">{{roomDetail.num|| '-'}}</span>
              </el-form-item>
              <div class="form_title">环境要求</div>
              <el-form-item label="额定温度(℃)">
                <span slot="label">额定温度(℃) ： </span>
                <template v-if="isEdit">
                  <el-input-number v-model="roomDetail.minTemperature" controls-position="right"></el-input-number>~
                  <el-input-number v-model="roomDetail.maxTemperature" controls-position="right"></el-input-number>
                </template>
                <span v-else class="value">{{roomDetail.minTemperature}}~{{roomDetail.maxTemperature}}</span>
              </el-form-item>
              <el-form-item label="额定温度(℃)">
                <span slot="label">额定温度(℃) ： </span>
                <template v-if="isEdit">
                  <el-input-number v-model="roomDetail.minHumidity" controls-position="right"></el-input-number>~
                  <el-input-number v-model="roomDetail.maxHumidity" controls-position="right"></el-input-number>
                </template>
                <span v-else class="value">{{roomDetail.minHumidity}}~{{roomDetail.maxHumidity}}</span>
              </el-form-item>
              <el-form-item label="额定气压(hPa)">
                <span slot="label">额定气压(hPa) ： </span>
                <template v-if="isEdit">
                  <el-input-number v-model="roomDetail.minPressure" controls-position="right"></el-input-number>~
                  <el-input-number v-model="roomDetail.maxPressure" controls-position="right"></el-input-number>
                  <div>注：1hPa = 100Pa</div>
                </template>
                <span v-else class="value">{{roomDetail.minPressure}}~{{roomDetail.maxPressure}}</span>
              </el-form-item>
              <el-form-item label="颗粒物(mg/m³)">
                <span slot="label">颗粒物(mg/m³) ： </span>
                <template v-if="isEdit">
                  <el-input-number v-model="roomDetail.minPressure" controls-position="right"></el-input-number>~
                  <el-input-number v-model="roomDetail.maxPressure" controls-position="right"></el-input-number>
                </template>
                <span v-else class="value">{{roomDetail.minPressure}}~{{roomDetail.maxPressure}}</span>
              </el-form-item>
              <el-form-item label="TVOC(mg/m³)">
                <span slot="label">TVOC(mg/m³) ： </span>
                <template v-if="isEdit">
                  <el-input-number v-model="roomDetail.minPressure" controls-position="right"></el-input-number>~
                  <el-input-number v-model="roomDetail.maxPressure" controls-position="right"></el-input-number>
                </template>
                <span v-else class="value">{{roomDetail.minPressure}}~{{roomDetail.maxPressure}}</span>
              </el-form-item>
              <el-form-item label="光照(lx)">
                <span slot="label">光照(lx) ： </span>
                <template v-if="isEdit">
                  <el-input-number v-model="roomDetail.minPressure" controls-position="right"></el-input-number>~
                  <el-input-number v-model="roomDetail.maxPressure" controls-position="right"></el-input-number>
                </template>
                <span v-else class="value">{{roomDetail.minPressure}}~{{roomDetail.maxPressure}}</span>
              </el-form-item>
              <el-form-item label="CO2浓度(mg/m³)">
                <span slot="label">CO2浓度(mg/m³) ： </span>
                <template v-if="isEdit">
                  <el-input-number v-model="roomDetail.minPressure" controls-position="right"></el-input-number>~
                  <el-input-number v-model="roomDetail.maxPressure" controls-position="right"></el-input-number>
                </template>
                <span v-else class="value">{{roomDetail.minPressure}}~{{roomDetail.maxPressure}}</span>
              </el-form-item>
              <el-form-item label="房间开门要求">
                <span slot="label">房间开门要求 ： </span>
                <template v-if="isEdit">
                  <el-radio v-model="roomDetail.doorStatus" label="1">无要求</el-radio>
                  <el-radio v-model="roomDetail.doorStatus" label="2">常开</el-radio>
                  <el-radio v-model="roomDetail.doorStatus" label="3">常闭</el-radio>
                </template>
                <span v-else class="value">{{roomDetail.minPressure}}~{{roomDetail.maxPressure}}</span>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "platform-campus",
    data() {
      return {
        isEdit: false,
        current:{
          campus:null,
          building:null,
          floor:null,
          room:null,
        },
        campus:[
          { id:1, name:'默认园区',}
        ],
        roomDetail: {},
        building:[ ],
        floor:[ ],
        room:[ ]
      }
    },
    methods: {
      chooseItem(item,data){
        this.current[item] = data.id
        if (item==='campus'){
          this.building=[
            { id:1, name:'住院部',},
            { id:2, name:'门诊楼',},
            { id:3, name:'检验科',},
            { id:4, name:'放射楼',},
          ]
        }
        if (item==='building'){
          this.floor=[
            { id:1, name:'1层',},
            { id:2, name:'2层',},
            { id:3, name:'2层',},
            { id:4, name:'2层',},
            { id:5, name:'2层',}
          ]
        }
        if (item==='floor'){
          this.room=[
            { id:1, name:'急救室',},
            { id:2, name:'ICU',},
            { id:3, name:'手术室',},
          ]
        }
      },
      editRoomDetail() {
        this.isEdit = !this.isEdit
      },
      deleteTree() {
        this.$message('删除科室')
      },
      saveEdit() {
        // 在这里提交修改
        this.editRoomDetail()
      }
    }
  }
</script>

<style scoped>
  .campus {
    margin: 5px 20px;
  }

  .header_title {
    font-size: 16px;
  }

  .cascade_header {
    width: 100%;
    height: 57px;
    display: flex;
    flex-direction: row;
  }

  .cascade_header {
    min-width: 210px;
    border-bottom: 1px solid #eee;
    font-size: 16px;
    line-height: 57px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .cascade_header span {
    margin: 0 10px;
  }

  .cascade_header span a {
    font-size: 14px;
    color: #20a0ff;
  }

  .cascade_header span:nth-child(2) {
    font-size: 14px;
  }

  /deep/ .el-cascade-menu {
    width: 25%;
    /*min-width: 200px;*/
  }

  .cascade_content {
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    color: rgba(0,0,0,.65);;
  }

  .cascade_col {
    width: 25%;
    min-width: 210px;
    border-right: 1px solid #eee
  }

  .cascade_item {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    line-height: 44px;
    font-size: 14px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
  }
  .cascade_item div{
    margin: 0 10px;
  }
  .is-choose{
    background-color: #99d2fb;
  }

  .form_title{
    font-size: 16px;
    margin-bottom: 20px;
    color: rgba(0,0,0,.65);
    font-weight: bold;
  }
  /deep/ label {
    font-weight: normal;
  }
</style>