热点推荐

查看: 75|回复: 0

vue使用element-china-area-data插件实现省市区联动

[复制链接]
  • TA的每日心情
    郁闷
    2022-5-11 17:24
  • 等级头衔

    等級:管理员

    Rank: 9Rank: 9Rank: 9

    积分成就
    UID
    1
    威望
    582
    贡献
    2277
    主题
    1216
    精华
    3
    积分
    2963
    注册时间
    2020-1-22
    最后登录
    2022-5-25

    快捷版块
    版块
    官方交流Q群
    版块
    在线申请友链

    建功伟业

    最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献荣誉管理论坛元老

    发表于 2022-4-24 11:49:08 | 显示全部楼层 |阅读模式

    前端开发的同学们应该都知道,省市区联动在日常开发中用的非常多,今天跟大家分享一款好用的插件 — element-china-area-data。
    安装:
    1. npm install element-china-area-data -Scnpm install element-china-area-data -S
    复制代码
    代码样式:

    1. <div><script>
    2. import {<!-- --> regionData } from "element-china-area-data";//引入
    3. export default {<!-- -->
    4. data() {<!-- -->
    5. return {<!-- -->
    6. options: regionData,//选择格式
    7. provinces: [], //省市区绑定数组
    8. };
    9. },
    10. methods: {<!-- -->
    11. // 事件触发
    12. handleChange(e) {<!-- -->
    13. console.log(e, "所选code值");
    14. },
    15. },
    16. };
    17. </script></div>
    复制代码

    20220422191556165062615653004.png
    2. provinceAndCityDataPlus 是省市两级联动数据且显示 "全部" 字样选项。当 options 的值为 provinceAndCityDataPlus 时,展示如下:
    20220422191556165062615618114.png

    3. regionData 是省市区三级联动数据且不带 "全部" 字样选项。当 options 的值为 regionData 时,展示如下:
    20220422191556165062615686655.png
    4. regionDataPlus 是省市区三级联动数据且显示 "全部" 字样选项。当 options 的值为 regionDataPlus 时,展示如下:
    20220422191557165062615797439.png
    注意: 当选择 “全部” 字样选项时,绑定的 value 值是空字符串。

    20220422191557165062615714760.png

    帖子地址: 

    温馨提示:
    1、在资源网里发表的文章仅代表作者本人的观点,与本网站立场无关。
    2、资源网的所有内容都不保证其准确性,有效性,时间性。阅读本站内容因误导等因素而造成的损失本站不承担连带责任。
    3、当政府机关依照法定程序要求披露信息时,本资源网均得免责。
    4、若因线路及非本站所能控制范围的故障导致暂停服务期间造成的一切不便与损失,资源网不负任何责任。
    5、注册会员通过任何手段和方法针对资源网进行破坏,我们有权对其行为作出处理。并保留进一步追究其责任的权利。
    6、 如遇到加密压缩包,默认解压密码为"www.52qians.com",如遇到无法解压的请联系管理员!
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

  • 返回顶部