递归修改数据字段名称，实现Cascader级联选择器英文显示
文章目录
递归修改数据字段名称，实现Cascader级联选择器英文显示项目需求说明实现需求代码
项目需求说明
项目分中文和英文，有一个城市区域的级联菜单，需要实现中文和英文不同，但是后台返回了如下的一个接口，需前端自己处理。 项目中使用的ui框架是iView的Cascader，插件需要使用label字段。为了实现英文效果只能将labelEn的value值放到labe上。
实现需求代码
<script
>
function listFormat(list
) {
let tmp
= []
for (let i
= 0; i
< list
.length
; i
++) {
let item
= list
[i
]
console
.log(item
)
if (!item
.children
) {
tmp
.push({
value
: item
.value
,
label
: item
.labelEn
,
})
} else {
tmp
.push(
listFormat(item
.children
)
)
}
}
return tmp
;
}
console
.log("list:", listFormat(list
))
</script
>
<script
>
<Cascader
:data
="data" v
-model
="value1"></Cascader
>
let list
= [{
value
: 'beijing',
label
: '北京',
labelEn
: 'beijing',
children
: [{
value
: 'gugong',
label
: '故宫',
labelEn
: 'gugong'
},
{
value
: 'tiantan',
labelEn
: 'tiantan',
label
: '天坛'
},
{
value
: 'wangfujing',
labelEn
: 'wangfujing',
label
: '王府井'
}
]
}, {
value
: 'jiangsu',
labelEn
: 'jiangsu',
label
: '江苏',
children
: [{
value
: 'nanjing',
labelEn
: 'nanjing',
label
: '南京',
children
: [{
value
: 'fuzimiao',
labelEn
: 'fuzimiao',
label
: '夫子庙',
}]
},
{
value
: 'suzhou',
labelEn
: 'suzhou',
label
: '苏州',
children
: [{
value
: 'zhuozhengyuan',
labelEn
: 'zhuozhengyuan',
label
: '拙政园',
},
{
value
: 'shizilin',
labelEn
: 'shizilin',
label
: '狮子林',
}
]
}
],
}]
</script
>
