Vue.js
前端vue+element-ui 表单 省市区的输入及所传参数 __Vue.js__Element
粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利
前端出现表单有省市区选择、且后端需要省市区编码时
- 省市区采用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)
}
}
}
```<p style="line-height: 20px; color: #ccc">
版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
作者: 阿焘
原文链接：<a href='https://juejin.im/post/7026358708296744996'>https://juejin.im/post/7026358708296744996</a>
</p>