antd-design-vue 省市级联动 Cascader组件和Select组件

Posted 2023-05-09

参考技术A 选择安装以下 china-division包，包含港澳台

https://github.com/pansyjs/china-division

在需要的vue文件中

import cascaderOptions, DivisionUtil from '@pansy/china-division';

const divisionUtil =new DivisionUtil(cascaderOptions);

// 返回省级别数据，只有value和label  label是名字，value是code值

let provs=divisionUtil.getProvinces();

//给每个省份手动加入城市字段

provs.map(n=>

let citys=divisionUtil.getChildrenByCode(n.value);

n.children=citys;

)

export default

name:'',

data ()

return

options:provs

   

,

methods:

onChangeArea(value)  //选择省份和城市

console.log(value)

//value格式是 ["130000", "130100",]





<a-cascader :options="options" placeholder="请选择" @change="onChangeArea" />

====================================================================

第二种，用select组件，如何实现

export default

name:'',

data ()

return

provs:provs,

citys:[]



,

methods:

onChangeProvi(value)

console.log(value);//格式是140000

let citys=divisionUtil.getChildrenByCode(value);

this.citys=citys; //给选中的省份，赋值citys

,

onChangeCity(value) //选中城市

console.log(value);//格式是140300







<a-select default-value="请选择" style="width: 120px" @change="onChangeProvi">

<a-select-option :value="todo.value"  v-for="todo in provs">

todo.label

</a-select-option>

</a-select>

<a-select default-value="请选择" style="width: 120px" @change="onChangeCity">

<a-select-option :value="todo.value"  v-for="todo in citys">

todo.label

</a-select-option>

</a-select>

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

获取第三层，区的数据时，用 let areas=divisionUtil.getChildrenByCode(value);  是获取不到的，应该是bug

但是  // 返回源数据divisionUtil.getSourceData();  这个是正确的

所以，可以自己获取areas数据

let citys=[],areas=[];

let aa=sourceData.findIndex(n=>

return n.value== theProCode; //保留之前选择的省份的code

)

citys=sourceData[aa].children;//获取选择的省份下的所有城市

let bb=citys.findIndex(m=>

return m.value== theCityCode;//保留之前选择的城市的code

)

areas=citys[bb].children; //获取选择的城市下，所有的区

this.areas=areas;

省市联动效果

下拉框二级联动效果在日常应用场景中经常会碰到，尤其是涉及地区、品种等有多级选项时。例如：常见的省市联动下拉框，在选择省份时，城市列表也会更随改变。

思路：

1，所谓联动效果，是指出发父级的数据变化时，会影响到关联性子级数据元素的变化。

下面是造的省市的数据：

var linkDatas = {
            provinces:[
                {
                    "code":"0",
                    "name":"请选择"
                },
                {
                    "code":"1",
                    "name":"北京"
                },
                {
                    "code":"2",
                    "name":"天津"
                },
                {
                    "code":"3",
                    "name":"河北"
                },
                {
                    "code":"4",
                    "name":"湖北"
                },
                {
                    "code":"5",
                    "name":"广东"
                },
                {
                    "code":"6",
                    "name":"其他"
                }
            ],
            citys:{
                0:[
                    "请选择"
                ],
                1:[
                    "朝阳区",
                    "海淀区",
                    "东城区",
                    "西城区",
                    "房山区",
                    "其他"
                ],
                2:[
                    "天津"
                ],
                3:[
                    "沧州",
                    "石家庄",
                    "秦皇岛",
                    "其他"
                ],
                4:[
                    "武汉市",
                    "宜昌市",
                    "襄樊市",
                    "其他"
                ],
                5:[
                    "广州市",
                    "深圳市",
                    "汕头市",
                    "佛山市",
                    "珠海市",
                    "其他"
                ],
                6:[
                    "其他"
                ]
            }
            };

View Code

2，根据数据动态生成option节点：

function addOptions(target,options){
                var optionEle = null,
                        target = target,
                        option = options,
                        optionLen = options.length;
                for(var i = 0;i < optionLen;i++){
                    optionEle = document.createElement(\'option\');
                    optionEle.value = option[i].value;
                    optionEle.text = option[i].text;
                    target.options.add(optionEle);
                }
            }

3，根据上述省市数据，其中code代表“省级”指向“城市”的标识符，当省级的数据变更时，出发change事件：

pro.onchange = function(){
                    console.log(this);
                    var ct = city[this.value],
                            ctLen = ct.length,
                            ctBox = [];

                    c.innerHTML = "";    
                    /*添加城市*/    
                    for(var j = 0;j < ctLen;j++){
                        ctBox.push({
                            "text" : ct[j],
                            "value": ct[j]
                        });
                    }
                    addOptions(c,ctBox);
                }

HTML代码：

<div class="content">
            <h3>下拉框联动效果</h3>
            <p>省份：
                <select name="provinces" id="provinces">
                    
                </select>
            </p>
            <p>
                市：
                <select name="citys" id="citys">
                    
                </select>
            </p>
        </div>

全部JavaScript代码：

var linkDatas = {
            provinces:[
                {
                    "code":"0",
                    "name":"请选择"
                },
                {
                    "code":"1",
                    "name":"北京"
                },
                {
                    "code":"2",
                    "name":"天津"
                },
                {
                    "code":"3",
                    "name":"河北"
                },
                {
                    "code":"4",
                    "name":"湖北"
                },
                {
                    "code":"5",
                    "name":"广东"
                },
                {
                    "code":"6",
                    "name":"其他"
                }
            ],
            citys:{
                0:[
                    "请选择"
                ],
                1:[
                    "朝阳区",
                    "海淀区",
                    "东城区",
                    "西城区",
                    "房山区",
                    "其他"
                ],
                2:[
                    "天津"
                ],
                3:[
                    "沧州",
                    "石家庄",
                    "秦皇岛",
                    "其他"
                ],
                4:[
                    "武汉市",
                    "宜昌市",
                    "襄樊市",
                    "其他"
                ],
                5:[
                    "广州市",
                    "深圳市",
                    "汕头市",
                    "佛山市",
                    "珠海市",
                    "其他"
                ],
                6:[
                    "其他"
                ]
            }
            };
            function addOptions(target,options){
                var optionEle = null,
                        target = target,
                        option = options,
                        optionLen = options.length;
                for(var i = 0;i < optionLen;i++){
                    optionEle = document.createElement(\'option\');
                    optionEle.value = option[i].value;
                    optionEle.text = option[i].text;
                    target.options.add(optionEle);
                }
            }
            function provincesCitysLink(pro,c){
                var LD                 = linkDatas,
                        provinces = LD.provinces,
                        city             = LD.citys,
                        initCity    = city[0],
                        proBox        = [];

                /*添加省份*/
                for(var i = 0;i < provinces.length;i++){
                    proBox.push({
                        "text" : provinces[i].name,
                        "value": provinces[i].code
                    })
                }        
                addOptions(pro,proBox);

                /*初始化城市*/
                addOptions(c,[{
                    "text" : initCity,
                    "value": initCity
                }]);

                /*添加联动事件*/
                pro.onchange = function(){
                    console.log(this);
                    var ct = city[this.value],
                            ctLen = ct.length,
                            ctBox = [];

                    c.innerHTML = "";    
                    /*添加城市*/    
                    for(var j = 0;j < ctLen;j++){
                        ctBox.push({
                            "text" : ct[j],
                            "value": ct[j]
                        });
                    }
                    addOptions(c,ctBox);
                }
            }
            var provinces = document.getElementById(\'provinces\'),
                    citys         = document.getElementById(\'citys\');
            provincesCitysLink(provinces,citys);

 

 

 

 

 

 

DEMO演示：CLICK ME！