ElementUI--级联与树形省市区

最新推荐文章于 2024-06-12 09:14:01 发布

原创

最新推荐文章于 2024-06-12 09:14:01 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文介绍了在前端项目中使用ElementUI进行省市区选择时，如何实现级联与树形效果。通过分别展示级联HTML和JS以及树形HTML和JS的代码实例，阐述了两者在数据加载和交互上的区别。

项目中有用到省市区选择，我们是三个接口获取数据的，在此记录一下级联和树形的区别：

级联HTML：

<el-cascader :props="region"></el-cascader>

级联JS：

			region: {
 2                 lazy: true,
 3                 lazyLoad(node, resolve){
 4                     if(node.level === 0){
 5                         getProvince().then(val =>{
 6                             if (val.code == 200) {
 7                                 const nodes = val.data.map(res =>({
 8                                     label: res.name,
 9                   level: node.level,
10                   value: res
11                                 }))
12                                 resolve(nodes)
13                             }
14                         }).catch(val=>{
15                             console.log(val)
16                         })
17                     }else if(node.level === 1){
18                         getCity(node.data.value.provinceId).then(value =>{
19