elementUI 下拉單選和級聯(lián)下拉

直接上代碼:

<!--
 * @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="請選擇地區(qū)" @change="handleChangeCity">
      <el-option
        v-for="item in cityList"
        :key="item.code"
        :label="item.name"
        :value="item.code">
      </el-option>
    </el-select>
  </div> -->
  <!-- 級聯(lián)選擇器 -->
  <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: {  // 級聯(lián)選項
        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: "太原事業(yè)部"
            },
            {
              regionCode: "BJTY2",
              regionName: "太原事業(yè)部2"
            }
          ]
        },
        {
          regionCode: "LHJT2",
          regionName: "龍湖集團2",
          secondRegion: [
            {
              regionCode: "BJTY2",
              regionName: "太原事業(yè)部2"
            },
            {
              regionCode: "BJTY22",
              regionName: "太原事業(yè)部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>
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末魏保,一起剝皮案震驚了整個濱河市咕宿,隨后出現(xiàn)的幾起案子尚蝌,更是在濱河造成了極大的恐慌彬犯,老刑警劉巖脓魏,帶你破解...
    沈念sama閱讀 212,816評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件颤殴,死亡現(xiàn)場離奇詭異溶耘,居然都是意外死亡,警方通過查閱死者的電腦和手機服鹅,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評論 3 385
  • 文/潘曉璐 我一進店門凳兵,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人企软,你說我怎么就攤上這事庐扫。” “怎么了仗哨?”我有些...
    開封第一講書人閱讀 158,300評論 0 348
  • 文/不壞的土叔 我叫張陵形庭,是天一觀的道長。 經(jīng)常有香客問我厌漂,道長萨醒,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,780評論 1 285
  • 正文 為了忘掉前任苇倡,我火速辦了婚禮富纸,結果婚禮上,老公的妹妹穿的比我還像新娘旨椒。我一直安慰自己晓褪,他們只是感情好,可當我...
    茶點故事閱讀 65,890評論 6 385
  • 文/花漫 我一把揭開白布钩乍。 她就那樣靜靜地躺著辞州,像睡著了一般怔锌。 火紅的嫁衣襯著肌膚如雪寥粹。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,084評論 1 291
  • 那天埃元,我揣著相機與錄音涝涤,去河邊找鬼。 笑死岛杀,一個胖子當著我的面吹牛阔拳,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播类嗤,決...
    沈念sama閱讀 39,151評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼糊肠,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了遗锣?” 一聲冷哼從身側響起货裹,我...
    開封第一講書人閱讀 37,912評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎精偿,沒想到半個月后弧圆,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體赋兵,經(jīng)...
    沈念sama閱讀 44,355評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,666評論 2 327
  • 正文 我和宋清朗相戀三年搔预,在試婚紗的時候發(fā)現(xiàn)自己被綠了霹期。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,809評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡拯田,死狀恐怖历造,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情船庇,我是刑警寧澤帕膜,帶...
    沈念sama閱讀 34,504評論 4 334
  • 正文 年R本政府宣布,位于F島的核電站溢十,受9級特大地震影響垮刹,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜张弛,卻給世界環(huán)境...
    茶點故事閱讀 40,150評論 3 317
  • 文/蒙蒙 一荒典、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧吞鸭,春花似錦寺董、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至造虏,卻和暖如春御吞,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背漓藕。 一陣腳步聲響...
    開封第一講書人閱讀 32,121評論 1 267
  • 我被黑心中介騙來泰國打工陶珠, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人享钞。 一個月前我還...
    沈念sama閱讀 46,628評論 2 362
  • 正文 我出身青樓揍诽,卻偏偏與公主長得像,于是被迫代替她去往敵國和親栗竖。 傳聞我的和親對象是個殘疾皇子暑脆,可洞房花燭夜當晚...
    茶點故事閱讀 43,724評論 2 351

推薦閱讀更多精彩內(nèi)容