Vue.js 使用 El-select 实现楼栋和楼层选择

<div class='floor-select-box'>
              <el-select v-model='floorvalue'  :popper-append-to-body='false' placeholder='请选择楼栋'>
                   <el-option
                    v-for='item in flooroptions'
                    :key='item.value'
                    :label='item.label'
                    :value='item.value'>
                   </el-option>
              </el-select>
            </div>
            <div class='floor-select-box'>
              <el-select v-model='storeyvalue'  :popper-append-to-body='false' placeholder='请选择楼层'>
                   <el-option
                    v-for='item in storeyoptions'
                    :key='item.value'
                    :label='item.label'
                    :value='item.value'>
                   </el-option>
              </el-select>
            </div>
<script>
export default {
  data() {
    return {
      floorvalue: '',
      storeyvalue: '',
      flooroptions: [],
      storeyoptions: []
    }
  },
  created() {
    let self = this
    //老人定位选择楼层
    if (self.floorvalue) {
      self.shiftFloor(self.floorvalue);
    }
  },
  methods: {
    //老人定位切换楼层
    shiftFloor(value) {
      console.log('老人定位选择楼层: ', value)
      let self = this;
      switch (value) {
        case '1':
          let option1 = [{ value: '1', label: '一层' }, { value: '2', label: '二层' }]
          self.storeyoptions = option1;
          break;
        case '2':
          let option2 = [{ value: '1', label: '一层' }, { value: '2', label: '二层' }, { value: '3', label: '三层' }, { value: '4', label: '四层' }, { value: '5', label: '五层' }, { value: '6', label: '六层' }, { value: '7', label: '七层' }, { value: '8', label: '八层' }]
          self.storeyoptions = option2;
          break;
        case '3':
          let option3 = [{ value: '1', label: '一层' }, { value: '2', label: '二层' }, { value: '3', label: '三层' }, { value: '4', label: '四层' }, { value: '5', label: '五层' }, { value: '6', label: '六层' }, { value: '7', label: '七层' }, { value: '8', label: '八层' }]
          self.storeyoptions = option3;
          break;
        case '4':
          let option4 = [{ value: '1', label: '一层' }, { value: '2', label: '二层' }, { value: '3', label: '三层' }, { value: '4', label: '四层' }, { value: '5', label: '五层' }, { value: '6', label: '六层' }, { value: '7', label: '七层' }, { value: '8', label: '八层' }]
          self.storeyoptions = option4;
          break;
        case '5':
          let option5 = [{ value: '1', label: '一层' }, { value: '2', label: '二层' }, { value: '3', label: '三层' }, { value: '4', label: '四层' }, { value: '5', label: '五层' }, { value: '6', label: '六层' }, { value: '7', label: '七层' }, { value: '8', label: '八层' }, { value: '9', label: '九层' }, { value: '10', label: '十层' }, { value: '11', label: '十一层' }, { value: '12', label: '十二层' }, { value: '13', label: '十三层' }]
          self.storeyoptions = option5;
          break;
        case '6':
          let option6 = [{ value: '1', label: '一层' }, { value: '2', label: '二层' }]
          self.storeyoptions = option6;
          break;
      }
    }
  }
}
</script>