前端开发的同学们应该都知道,省市区联动在日常开发中用的非常多,今天跟大家分享一款好用的插件 — element-china-area-data。
安装
npm install element-china-area-data -Scnpm install element-china-area-data -S
代码样例
<script> import {<!-- --> regionData } from "element-china-area-data";//引入 export default {<!-- --> data() {<!-- --> return {<!-- --> options: regionData,//选择格式 provinces: [], //省市区绑定数组 }; }, methods: {<!-- --> // 事件触发 handleChange(e) {<!-- --> console.log(e, "所选code值"); }, }, }; </script>
element-china-area-data 插件主要分成四种展示格式:
provinceAndCityDataprovinceAndCityDataPlusregionDataregionDataPlus
以下是设置不同属性时对应展示的格式:
1.
provinceAndCityData
是省市两级联动数据且不带"全部"
字样选项。当options
的值为provinceAndCityData
时,展示如下:
2.
provinceAndCityDataPlus
是省市两级联动数据且显示"全部"
字样选项。当options
的值为provinceAndCityDataPlus
时,展示如下:
3.
regionData
是省市区三级联动数据且不带"全部"
字样选项。当options
的值为regionData
时,展示如下:
4.
regionDataPlus
是省市区三级联动数据且显示"全部"
字样选项。当options
的值为regionDataPlus
时,展示如下:
注意:
当选择 “全部” 字样选项时,绑定的 value 值是空字符串。
文章版权声明:除非注明,否则均为猫屋博客MAOWUO.CN原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...