直接上代码:
<!--
* @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>