前端vue+element-ui 表单 省市区的输入及所传参数
前端出现表单有省市区选择、且后端需要省市区编码时
省市区采用elementui的级联组件
数据采用 “编码-名称”json文件封装成固定形式的数组形式---“ChinaAreaOptions”
"ChinaAreaRef"---获取选取到哪一级的级联
设置在 :props="{ checkStrictly: true }"可以实现任意选择一级
<el-form-item class="item-30" label="省市区" prop="areaDataValue"> <div class="block"> <el-cascader v-model="areaDataValue" ref="ChinaAreaRef" placeholder="请选择" :props="{ checkStrictly: true }" :options="ChinaAreaOptions" filterable :disabled="orderUnDisabled" clearable > </el-cascader> </div> </el-form-item>复制代码
而element-ui级联所需要的数据的格式(我们需要手动转换)为:
ChinaAreaOptions: [ { value: '', label: '浙江省', children: [ { value: '', label: '杭州市', children: [ { value: '', label: '西湖区' }, { value: '', label: '' }, ] }, { value: '', label: '宁波市', children: [ { value: '', label: '市辖区' }, { value: '', label: '海曙区' } ] }, ... ] }, { value: '', label: '广东省', children: [ ... ] } ... ]复制代码
现有 省市区统一正确的编码json文件,格式如下(可在网上获取完整版),所以需要把此json文件转为上述的数组格式
{ "areaData": [ { "86": { "110000": "北京市", "120000": "天津市", "130000": "河北省", "140000": "山西省", "150000": "内蒙古自治区", "210000": "辽宁省", "220000": "吉林省", "230000": "黑龙江省", "310000": "上海市", "320000": "江苏省", "330000": "浙江省", "340000": "安徽省", "350000": "福建省", "360000": "江西省", "370000": "山东省", "410000": "河南省", "420000": "湖北省", "430000": "湖南省", "440000": "广东省", }, "330000": { "330100": "杭州市", "330200": "宁波市", "330300": "温州市", "330400": "嘉兴市", "330500": "湖州市", "330600": "绍兴市", "330700": "金华市", "330800": "衢州市", "330900": "舟山市", "331000": "台州市", "331100": "丽水市" }, "330100": { "330101": "市辖区", "330102": "上城区", "330103": "下城区", "330104": "江干区", "330105": "拱墅区", "330106": "西湖区", "330108": "滨江区", "330109": "萧山区", "330110": "余杭区", "330111": "富阳区", "330112": "临安区", "330122": "桐庐县", "330127": "淳安县", "330182": "建德市" } } ] }复制代码
编写 省市区json数据 转 级联数据格式数组 (处理省市区数据)的封装方法:
function getAreaList(areaList) { const root = [] let obj = {} let districtObj = {} const areaObj = areaList[0] // 所有的数据 const rootEle = areaList[0]['86'] // 获取到省的数据 let childrenList = [] let countryList = [] let countryObj = {} // 遍历取得省的数据中的所有键 for (var rootKey in rootEle) { // 遍历取得所有的数据的键,以"编码"这个键 对上 某省数据中的"编码"键 for (var key in areaObj) { childrenList = [] // 存放该省的 市数据 // 如果所有数据中某个编码键 等于 省数据中的编码键,即隶属于该省 if (key == rootKey) { // areaObj[rootKey] 指的是 所有数据中 某个省的所有市数据 for (var childrenKey in areaObj[rootKey]) {//遍历取得该省的所有市编码 countryList = [] // 存放该省某市的 所有区数据 // 遍历取得该省某市的所有区编码 for (var countrykeys in areaObj[childrenKey]) { countryObj = { value: countrykeys, label: areaObj[childrenKey][countrykeys] } countryList.push(countryObj) } districtObj = { value: childrenKey, label: areaObj[rootKey][childrenKey], //表示此省此市 children: countryList } childrenList.push(districtObj) } obj = { value: rootKey, label: rootEle[rootKey], children: childrenList } // 该省的数据 root.push(obj) // 将所有的省数据 放进数组 } } } console.log('省市区:', root) return root }复制代码
开始转换数据:获取省市区json编码的areaData,并以参数的形式执行上述方法,得到级联组件所需要的那种数据格式。
// 获得级联所需的数据形式 ----即上述的ChinaAreaOptions this.ChinaAreaOptions = getAreaList(areaData) 复制代码
在表单中需要的 选取省市区 以及 进入表单需选中某个省市区(渲染数据)
//element组件里的 getCheckedNodes 获取选中的节点 // 对选中的省市区 根据编码相等 封装成对象 function getCascaderObj(val, opt) { return val.map(function (value, index) { for (var itm of opt) { // 在所有的省市区编码上找到 选中的省市区编码 if (itm.value == value) { opt = itm.children return itm } } return null }) }复制代码
不规定用户需要选齐省市区,即可以选一个省、或者一个省和旗下的市、或者选齐省市区
var nodes = this.$refs['ChinaAreaRef'].getCheckedNodes()[0].path if (nodes) { let nodesObj = this.getCascaderObj(nodes, this.ChinaAreaOptions) if (nodesObj.length === 1) { this.orderEditForm.Province = nodesObj[0].label this.orderEditForm.City = '' this.orderEditForm.Area = '' this.orderEditForm.ProvinceCode = nodesObj[0].value this.orderEditForm.CityCode = '' this.orderEditForm.AreaCode = '' } if (nodesObj.length === 2) { this.orderEditForm.Province = nodesObj[0].label this.orderEditForm.City = nodesObj[1].label this.orderEditForm.Area = '' this.orderEditForm.ProvinceCode = nodesObj[0].value this.orderEditForm.CityCode = nodesObj[1].value this.orderEditForm.AreaCode = '' } if (nodesObj.length === 3) { this.orderEditForm.Province = nodesObj[0].label this.orderEditForm.City = nodesObj[1].label this.orderEditForm.Area = nodesObj[2].label this.orderEditForm.ProvinceCode = nodesObj[0].value this.orderEditForm.CityCode = nodesObj[1].value this.orderEditForm.AreaCode = nodesObj[2].value } } const postData = { ...this.orderEditForm } postData.LoginName = '' // postData.LoginName = this.LoginUserNo.loginUserNo console.log('添加客户', postData)复制代码
得到的this.orderEditForm即是我们需要发给后端的表单数据啦!!
进入表单所在页面,如果需要将后台返回的数据渲染到表单的话,看第一段代码中的prop="areaDataValue",后台返回了一个省市区编码的数组returnData,并将其赋值给areaDataValue。
if (this.returnData.ProvinceCode) { this.areaDataValue = [this.returnData.ProvinceCode] if (this.returnData.CityCode) { this.areaDataValue.push(this.returnData.CityCode) if (this.returnData.AreaCode) { this.areaDataValue.push(this.returnData.AreaCode) } } }
作者:阿焘
链接:https://juejin.cn/post/7026358708296744996