Element UI 中国省市区级联数据-复选框-同时选择
安装
npm install element-china-checkbox -S
更新 2020年03月31日
- 更新自定义省市区数据, 通过props的方式传入, 兼容之前版本
- 如未传入自定义数据,则使用默认的省市区数据
示例
图片示例
默认状态
点击展开下拉菜单
选中对应城市所有区域(全选)
再次点击则可以取消全选
关闭下拉菜单
获取数据
-
通过监听
getElData
事件获取一个Object
// 数据格式如下const checkData = provinceId: thisprovinceId // 省份ID cityId: thiscityId // 城市ID areaId: thisareaId // 区县ID
使用
// 引入组件// 注册组件components: elementChinaCheckbox
<!-- 使用组件并监听事件 getElData--> 确认选择 <!-- 使用slot 可以传入自定义内容来替换默认文字 -->
使用this.$refs来获取数据
- 如果觉得按钮对整体风格有所影响,则可以通过传入
Submit=false
来控制是否显示按钮以及自定义事件
- 使用
this.$refs
来获取数据
const checkboxData = this$refsxxxx const province_id = checkboxDataprovinceId const city_id = checkboxDatacityId const region_id = checkboxDataareaId
传入已选择的数据
/* 注意,数组内ID为String类型 */const selectedData = provinceId: // 已选择的省份 cityId: // 已选择市级区域 areaId: // 已选择的区县
数据来源
- 请确保使用了
china-area-data
依赖包,否则将会缺少数据源