发布时间:2023-06-14 16:30
开开心心工作,兢兢业业生活
那好,我们找个轮子
安装:
npm install element-china-area-data -S
使用:
<template>
<div id="app">
<el-cascader
size="large"
:options="options"
v-model="selectedOptions"
@change="handleChange">
</el-cascader>
</div>
</template>
<script>
import { regionData } from 'element-china-area-data'
export default {
data () {
return {
options: regionData,
selectedOptions: []
}
},
methods: {
handleChange (value) {
console.log(value)
}
}
}
</script>
预览:
回复:
领导: 不行,多余的包会影响加载速度,我们有自己的接口
请求接口,获取第一级内容(省份),点击省份项,请求数据,获取第二级内容(城市)并动态加载出来,点击城市,请求数据,动态加载第三级内容(区域)
<el-cascader :props="props"></el-cascader>
<script>
let id = 0;
export default {
data() {
return {
props: {
lazy: true,
lazyLoad (node, resolve) {
const { level } = node;
setTimeout(() => {
const nodes = Array.from({ length: level + 1 })
.map(item => ({
value: ++id,
label: `选项${id}`,
leaf: level >= 2
}));
// 通过调用resolve将子节点数据返回,通知组件数据加载完成
resolve(nodes);
}, 1000);
}
}
};
}
};
</script>
核心:
// 理解 level 的目的和意义
const nodes = Array.from({ length: level + 1 })
组件:
<template>
<div class="cascaderArea">
<el-cascader
:props="props"
v-model="selectedOptions"
placeholder="请选择行政区域"
@change="handleChange"
style="width: 270px"
></el-cascader>
</div>
</template>
<script>
import { areaOption } from '@/assets/api'
export default {
name: 'cascaderArea',
data() {
return {
selectedOptions: [],
props: {
lazy: true,
lazyLoad: (node, resolve) => {
const { level } = node // node 节点数据
const nodes = [] // 动态节点
let type = level == 0 ? "0" : node.value // 0 代表第一次请求
this.provinceFn(type)
.then((res) => {
res.list.map((item) => {
let area = {
value: item.id,
label: item.areaName,
leaf: node.level >= 2,
};
nodes.push(area)
});
resolve(nodes) // 回调
})
.catch((error) => {
console.log(error)
})
},
}
}
},
methods: {
provinceFn(id) { // 获取省市区街道
return areaOption(id)
},
handleChange(value) { // 选择的行政区
this.$emit('getSelectedOptions', value)
}
}
}
</script>
<style lang="scss" scoped>
</style>
父组件:
<template>
<CascaderArea @getSelectedOptions='getSelectedOptions' />
</template>
<script>
import CascaderArea from '@/components/cascaderArea.vue'
...
components: { CascaderArea },
methods: {
getSelectedOptions(val) {
this.selectedOptions = val
}
}
</script>
这个级联选择器不仅仅可以用在省市区的级联选择上,更可以面对庞大数据,做一个多层级选择菜单,实现数据的分级渲染
HTML:
<el-form-item label="行政区域地址" prop="province" class="wholeLine">
<el-select
v-model="lineData.province"
placeholder="请选择省份"
@change="provinceSelect"
>
<el-option
v-for="item in provinceOptions"
:label="item.areaName"
:key="item.id"
:value="item.id"
></el-option>
</el-select>
<el-select
v-show="this.lineData.province && this.cityOptions.length != 0"
v-model="lineData.regionCity"
placeholder="请选择城市"
@change="citySelect"
>
<el-option
v-for="item in cityOptions"
:label="item.areaName"
:key="item.id"
:value="item.id"
></el-option>
</el-select>
<el-select
v-show="this.lineData.regionCity && this.countyOptions.length != 0"
v-model="lineData.regionCounty"
placeholder="请选择县/区"
@change="countySelect"
>
<el-option
v-for="item in countyOptions"
:label="item.areaName"
:key="item.id"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
JS:
provinceSelect(val) { // 省份 下拉框值改变时回调
this.provinceFullName = this.getLabel(val, this.provinceOptions)
if (this.lineData.regionCity) { // 千万要做一层判断,直接置空会导致 mode 绑定为 空
this.lineData.regionCity = ''
}
if (this.lineData.regionCounty) {
this.lineData.regionCounty = ''
}
area(val)
.then(res => {
this.cityOptions = res.list
})
},
citySelect(val) { // 城市 下拉框值改变时回调
this.cityFullName = this.getLabel(val, this.cityOptions)
if (this.lineData.regionCounty) { // 千万要做一层判断,直接置空会导致 mode 绑定为 空
this.lineData.regionCounty = ''
}
area(val)
.then(res => {
this.countyOptions = res.list
})
},
countySelect(val) { // 区/县 下拉框值改变时回调
this.countyFullName = this.getLabel(val, this.countyOptions)
},
如果有更好的解决方案可以留言,感谢批评指正
el-tree
开开心心工作,认认真真生活~