前言
接口是一次性返回所有的分类的,所以得要前端这边自己处理数据
最终效果
3列联动选择
uniapp 的select 选择器,固定死字段名了,所以我们 还需要给接口返回的字段重新命名
实现
活用list 的map(),filter(),方法
<u-select v-model="isPlatforationSelectShow" mode="mutil-column-auto" :list="platformCategorysList" @confirm="confirm" title="平台分类">
</u-select>
isPlatforationSelectShow: false, // data那里定义变量
platformCategorysList: [],
// 请求接口以后返回的操作
let dataList = res.data
this.platformCategorysList = []
dataList.forEach((item,index) => {
if(item.level === 0) {
let myItem = {}
myItem.value = item.categoryId
myItem.categoryId = item.categoryId
myItem.label = item.name
myItem.level = item.level
this.platformCategorysList.push(myItem)
}
})
this.platformCategorysList.forEach((item0,index0) => {
// this.platformCategorysList[index1].children = dataList.filter(item => item.parentId === item1.categoryId)
let filterList2 = dataList.filter(item1 => item1.parentId === item0.categoryId)
this.platformCategorysList[index0].children = filterList2.map((item2,
index2) => {
if (item2.parentId === item0.categoryId) {
let filterList3 = dataList.filter(item3 => item3.parentId === item2.categoryId)
let mapList3 = []
mapList3 = filterList3.map((item33,index33) => {
return {
'value': item33.id,
'categoryId': item33.categoryId,
'label': item33.name,
'level': item33.level
}
})
return {
'value': item2.id,
'categoryId': item2.categoryId,
'label': item2.name,
'level': item2.level,
'children': mapList3
}
}
})
})