Element UI

npm install element-china-checkbox -S

点击查看在线DEMO,初次打开会比较慢

通过监听 getElData事件获取一个Object

// 数据格式如下 const checkData = { provinceId: this.provinceId, // 省份ID cityId: this.cityId, // 城市ID areaId: this.areaId, // 区县ID } 使用

// 引入组件 import elementChinaCheckbox from 'element-china-checkbox' // 注册组件 components: { elementChinaCheckbox }

<!-- 使用组件并监听事件 getElData--> <element-china-checkbox @getElData="getElData"> 确认选择 <!-- 使用slot 可以传入自定义内容来替换默认文字 --> </element-china-checkbox> 使用this.$refs来获取数据 如果觉得按钮对整体风格有所影响,则可以通过传入 Submit=false 来控制是否显示按钮以及自定义事件

<element-china-checkbox :Submit="false"> </element-china-checkbox> 使用this.$refs来获取数据

const checkboxData = this.$refs.xxxx const province_id = checkboxData.provinceId const city_id = checkboxData.cityId const region_id = checkboxData.areaId 传入已选择的数据

<element-china-checkbox :Submit="false" :Selected="selectedData"> </element-china-checkbox>

/* 注意,数组内ID为String类型 */ const selectedData = { provinceId: [] // 已选择的省份 cityId: [] // 已选择市级区域 areaId: [] // 已选择的区县 } 数据来源

china-area-data v4.0.0

前往GitHub 点击前往

如果改进之处,欢迎点击提交issues