需求: pc端是用的element框架凫碌,H5和微信端是uni-app框架啦膜,所以數(shù)據(jù)是統(tǒng)一的有送,但是uni-app省市區(qū)是分開的數(shù)據(jù),我的天僧家,找了別人寫的插件雀摘,各種實(shí)現(xiàn),各種格式數(shù)據(jù)啸臀,花里胡哨届宠,但是卻沒(méi)我想要的(或許有但是代碼看的頭疼)烁落。所以就自己改裝了官網(wǎng)的一套乘粒,但是這只是我的業(yè)務(wù),
所以還是建議自己去專心研究實(shí)現(xiàn)屬于自己的組件(靜下心來(lái)啥都會(huì))伤塌。
實(shí)現(xiàn)思路: 1. 根據(jù) "huilderX登錄模板"那套模塊改裝灯萍,先的知道他的數(shù)據(jù)格式,省[{}], 市 [[{}]], 區(qū) [[[{}]]] 每聪,篩選的數(shù)據(jù)旦棉, 通過(guò)index找到對(duì)應(yīng)的對(duì)象。
2.把Cascader 級(jí)聯(lián)選擇器數(shù)據(jù)拆分成省药薯、市绑洛、區(qū)三個(gè)對(duì)象
// 分離省、市童本、區(qū)
filters(datas) {
let province = []? //省
let citys = []? // 市
let areas = [] // 區(qū)
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.根據(jù)后臺(tái)返回的省市區(qū)id找到對(duì)應(yīng)的index
// 省的id轉(zhuǎn)索引
? let a = this.province.findIndex(item=> item.value == newval[0])
const city = JSON.parse(JSON.stringify(this.city))
this.sum = newval[1]
// 市的id轉(zhuǎn)索引
let b = this.flatten(city, newval[1])
const area = JSON.parse(JSON.stringify(this.area))
// 區(qū)的id轉(zhuǎn)索引
let c = this.flatten(area, newval[2])
this.pickerValueDefault = [a,b,c]
// 將市真屯、區(qū)key轉(zhuǎn)成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
}