elementUI 下拉单选和级联下拉

直接上代码：

<!--
 * @Author: your name
 * @Date: 2020-04-11 13:47:10
 * @LastEditTime: 2020-04-11 15:03:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \longzhu-mdm-web\src\views\kit\productLibrary\productScan\select.vue
 -->
<template>
<!-- 单选 -->
  <!-- <div class="grid-content">
    <el-select v-model="codeValue" filterable placeholder="请选择地区" @change="handleChangeCity">
      <el-option
        v-for="item in cityList"
        :key="item.code"
        :label="item.name"
        :value="item.code">
      </el-option>
    </el-select>
  </div> -->
  <!-- 级联选择器 -->
  <div class="grid-content" v-show="initOk">
    <el-cascader
      popper-class="hidden-raido"
      ref="regionCascader"
      v-model="codeValue"
      :options="moreSelectCityList"
      :props="regionProps"
      :show-all-levels="false"
      @change="handleChangeCity">
    </el-cascader>
  </div>
</template>

<script>
export default {
  name: 'test',
  components: { },
  data() {
    return {
      codeValue: null,
      initOk: false,
      regionProps: {  // 级联选项
        label: 'regionName',
        value: 'regionCode',
        emitPath: false,
        checkStrictly: true,
        // multiple: true,
        children: 'secondRegion'
      },
      cityList: [
        {
          ucCode: "1",
          name: "龙湖集团",
          code: "LHJT",
          regionId: "LHJT",
          mdmProjectVos: null
        },
        {
          ucCode: "2",
          name: "长沙龙湖",
          code: "CSLH",
          regionId: "LHJT",
          mdmProjectVos: null
        },
        {
          ucCode: "3",
          name: "北京龙湖",
          code: "BJLH",
          regionId: "LHJT",
          mdmProjectVos: null
        }
      ],
      moreSelectCityList: [
        {
          regionCode: "LHJT",
          regionName: "龙湖集团",
          secondRegion: [
            {
              regionCode: "BJTY",
              regionName: "太原事业部"
            },
            {
              regionCode: "BJTY2",
              regionName: "太原事业部2"
            }
          ]
        },
        {
          regionCode: "LHJT2",
          regionName: "龙湖集团2",
          secondRegion: [
            {
              regionCode: "BJTY2",
              regionName: "太原事业部2"
            },
            {
              regionCode: "BJTY22",
              regionName: "太原事业部22"
            }
          ]
        }
      ]
    }
  },
  created () {
    this.initCityList(this.moreSelectCityList);
    this.initOk = true;
  },
  methods: {
    handleChangeCity() {
      console.log("城市code: " + this.codeValue);
    },
    // 初始化设置单选圆圈是否显示
    initCityList(data) {
      console.log(data)
      if (!Array.isArray(data)) {
          return data
      }
      data.forEach(item => {
        // !item.secondRegion.length && (item.secondRegion = null)
        item.disabled = Array.isArray(item.secondRegion)
        this.initCityList(item.secondRegion)
      })
    },
  }
}
</script>

<style lang="less">
.hidden-raido {
    label.is-disabled {
        display: none;
    }
}
</style>