你要的三级级联我都有
由于业务变动之前做的搜索框变为三级级联,特此记录三级级联使用的 Ant Design Vue 组件做的三级级联,emement-ui 类似废话不多说先看效果贴上代码,代码比较简单,注释很详细,就不详解了<template><div>省:<a-select :default-value="province" style="width: 200px" @change="h
·
由于业务变动之前做的搜索框变为三级级联,特此记录三级级联
前言
本文讲述下拉框的三级级联,有 Ant Design Vue 和 Element-ui 两种实现方式,有树形结构数据和分树形结构两种
Cascader 级联这块就不说了,你可以直接区组件库复制粘贴即可
Ant Design Vue 实现
使用的 Ant Design Vue 组件做的三级级联
废话不多说先看效果
贴上代码,代码比较简单,注释很详细,就不详解了
<template>
<div>
省:
<a-select v-model="province" style="width: 200px" @change="handleProvinceChange">
<a-select-option v-for="province in provinceData" :key="province">
{{ province }}
</a-select-option>
</a-select>
市:
<a-select v-model="city" style="width: 200px" @change="handleProvinceChange1">
<a-select-option v-for="city in cityList" :key="city">
{{ city }}
</a-select-option>
</a-select>
区县:
<a-select v-model="county" show-search :filter-option="filterOption" style="width: 200px">
<a-select-option v-for="county in countyList" :key="county">
{{ county }}
</a-select-option>
</a-select>
<a-button type="primary" @click="search">搜索</a-button>
</div>
</template>
<script>
export default {
data() {
return {
// 所有省数据
provinceData: [],
// 所有省市对应数据
cityData: {},
// 所有市县对应数据
countyData: {},
// 如果页面刷新,需要有默认值可以设置
// 搜索框显示的省数据
province: '',
// 搜索框显示的市数据
city: '',
// 搜索框显示的县数据
county: '',
// 选中某个省对应的市数据
cityList: [],
// 选中某个市对应的县数据
countyList: [],
}
},
mounted() {
// 相当于从后端获取的数据
this.provinceData = ['浙江省', '江苏省'];
this.cityData={
'浙江省': ['杭州', '宁波', '温州'],
'江苏省': ['南京', '苏州', '镇江'],
};
this.countyData= {
'杭州': ["西湖区", "下城区", "拱墅区"],
'宁波': ["海曙区", "江东区", "江北区"],
'温州': ["鹿城区", "龙湾区", "瓯海区"],
'南京': ["玄武区", "建邺区", "秦淮区"],
'苏州': ["姑苏区", "虎丘区", "吴中区"],
'镇江': ["丹徒区", "京口区", "润州区"]
};
},
methods: {
handleProvinceChange(value) {
// 当省重新选择,将市、县输入框清空
this.city = '';
this.county = '';
this.countyList = [];
// 当你选择省,需要给市赋默认值时使用,当然如果市赋了默认值,你也可以给县赋值
// this.city = this.cityData[value][0];
this.cityList = this.cityData[value];
},
handleProvinceChange1(value) {
// 当你重新选择市时,将县输入框清空
this.county = '';
// 当你选择市时,需要给县赋默认值使用
// this.county = this.countyData[value][0]; 默认值
this.countyList = this.countyData[value];
},
// 考虑到真实场景,有的下拉框值太多,可以添加搜索功能
filterOption(input, option) {
return (
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
);
},
// 点击查询调用后台接口,如果需要点击省市区就去调接口,可以在handleProvinceChange、handleProvinceChange1 方法中调接口
search(){
console.log('省:'+this.province,'市:'+this.city,'区:'+this.county);
}
}
}
</script>
Element-ui 实现
使用的 Element-ui 组件做的三级级联
区别:
两个组件本身没有区别,只是我用 Element-ui 实现的时候简化了数据结构,当然 Ant Design Vue 也可以,需要根据后台接口判断使用那种数据结构(前后端武力值高低决定数据格式)
后台接口实现树结构比较简单,格式化成 Ant Design Vue 绑定的那种数据结构前后端格式化数据相对麻烦,建议使用 Element-ui 这种数据结构绑定数据
效果和 Ant Design Vue 相同
贴上代码
<template>
<div>
省:
<el-select v-model="province" placeholder="请选择" @change="handleProvinceChange">
<el-option
v-for="province in Object.keys(treeData)" :key="province" :value="province">
</el-option>
</el-select>
市:
<el-select v-model="city" placeholder="请选择" @change="handleProvinceChange1">
<el-option
v-for="city in cityData" :key="city" :value="city">
</el-option>
</el-select>
区县:
<el-select v-model="county" placeholder="请选择" show-search :filter-option="filterOption">
<el-option
v-for="county in countyData" :key="county" :value="county">
</el-option>
</el-select>
<el-button type="primary">搜索</el-button>
</div>
</template>
<script>
export default {
data() {
return {
treeData:{},
// 当前下拉框市数据
cityData: [],
// 当前下拉框区县数据
countyData: [],
province: '',
city: '',
county: ''
}
},
mounted() {
// 相当于从后端获取的数据
this.treeData = {
'浙江省': {
'杭州': ["西湖区", "下城区", "拱墅区"],
'宁波': ["海曙区", "江东区", "江北区"],
'温州': ["鹿城区", "龙湾区", "瓯海区"]
},
'江苏省': {
'南京': ["玄武区", "建邺区", "秦淮区"],
'苏州': ["姑苏区", "虎丘区", "吴中区"],
'镇江': ["丹徒区", "京口区", "润州区"]
}
}
},
methods: {
// 选择省时,清空市县输入框数据,并清空县数组
handleProvinceChange(value){
this.county = '';
this.city = '';
this.countyData = [];
this.cityData = Object.keys(this.treeData[value]);
},
// 选择市时,清空区县输入框数据,并根据选择的区县查询区县数组
handleProvinceChange1(value){
this.county = '';
this.countyData = this.treeData[this.province][value];
},
// 考虑到真实场景,有的下拉框值太多,可以添加搜索功能
filterOption(input, option) {
return (
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
);
},
search(){
console.log('省:'+this.province,'市:'+this.city,'区:'+this.county);
}
}
}
</script>
有疑惑的可以留言讨论
更多推荐
已为社区贡献6条内容
所有评论(0)