需求： pc端是用的element框架，H5和微信端是uni-app框架，所以数据是统一的，但是uni-app省市区是分开的数据，我的天，找了别人写的插件，各种实现，各种格式数据，花里胡哨，但是却没我想要的（或许有但是代码看的头疼）。所以就自己改装了官网的一套，但是这只是我的业务，
所以还是建议自己去专心研究实现属于自己的组件（静下心来啥都会）。
实现思路： 1. 根据 "huilderX登录模板"那套模块改装，先的知道他的数据格式，省[{}], 市 [[{}]], 区 [[[{}]]] ，筛选的数据， 通过index找到对应的对象。
2.把Cascader 级联选择器数据拆分成省、市、区三个对象
// 分离省、市、区
filters(datas) {
let province = [] //省
let citys = [] // 市
let areas = [] // 区
for(let i = 0; i < datas.length; i ++ ) {
province.push({"label": datas[i].label, "value": datas[i].value})
if(datas[i].children) {
let childDatas = datas[i].children
let city = []
let area = []
for(let j = 0; j < childDatas.length; j ++ ) {
city.push({"label": childDatas[j].label, "value": childDatas[j].value})
if(childDatas[j].children) {
let childsNuxtDatas = childDatas[j].children
let areaChild = []
for(let k =0; k < childsNuxtDatas.length; k ++ ) {
areaChild.push({"label": childsNuxtDatas[k].label, "value": childsNuxtDatas[k].value})
}
area.push(areaChild)
}
}
areas.push(area)
citys.push(city)
}
}
this.province = [...province]
this.city = [...citys]
this.area = [...areas]
},
3.根据后台返回的省市区id找到对应的index
// 省的id转索引
let a = this.province.findIndex(item=> item.value == newval[0])
const city = JSON.parse(JSON.stringify(this.city))
this.sum = newval[1]
// 市的id转索引
let b = this.flatten(city, newval[1])
const area = JSON.parse(JSON.stringify(this.area))
// 区的id转索引
let c = this.flatten(area, newval[2])
this.pickerValueDefault = [a,b,c]
// 将市、区key转成index
flatten(arr,sum) {
arr.forEach((item,index)=>{
if(item[0] instanceof Array) {
this.flatten(item,sum)
} else {
if(item instanceof Array) {
let indexs =item.findIndex(list=> {
return list.value == sum
})
if(parseInt(indexs) >= 0) {
console.log(indexs)
this.sum = indexs
}
}
}
})
return this.sum
}
网友评论