文档章节

vue elementui Cascader 级联选择器 省市区实现

无知的小孩
 无知的小孩
发布于 2018/05/15 15:24
字数 542
阅读 3329
收藏 0

<template>
  <div style="width:300px;" >
      <el-cascader
        :options="options"
        expand-trigger="hover"
        @active-item-change="handleItemChange"
        @change="handleChange"
        :props="props"
      style="width:530px;" ></el-cascader>
  </div>
</template>

<script>
import API from '@/api'
export default {
  name: 'area-select',
  data () {
    return {
        options:[],
        values:'',
        texts:'',
        props:{
            value: 'id',
            label:'name',
            children: 'cities'
        }
    }
  },
  created () {      
  },
  mounted(){
    let page = this; 
    page.getCNodes('根',[]);
  },
  methods: {
    getCNodes (parentid,currentIds) {
        // console.log('加载下级节点')
        let page = this; 
        let currentIdsSize = currentIds.length;
        // console.log(currentIdsSize)
        API.area.findChildren({
            tyear:2016,
            parentid:parentid
        }).then(function (res) {
            let cities = new Array();
            res.forEach(function(r){
                if(r.depth < 5){
                    cities.push({id:r.id,name:r.name,cities:[]});
                }else{
                    cities.push({id:r.id,name:r.name});
                }                
            });
            if(currentIdsSize === 0){
                page.options = cities;
            }else if(currentIdsSize === 1){
                page.options.forEach(function(r,index){
                    if(r.id === currentIds[0]){
                        page.options[index].cities = cities;
                    }
                });
            }else if(currentIdsSize === 2){
               page.options.forEach(function(r0,i0){
                    if(r0.id === currentIds[0]){
                        page.options[i0].cities.forEach(function(r1,i1){
                            if(r1.id === currentIds[1]){
                                page.options[i0].cities[i1].cities = cities;
                            }
                        });
                    }
               });
            }else if(currentIdsSize === 3){
               page.options.forEach(function(r0,i0){
                    if(r0.id === currentIds[0]){
                        page.options[i0].cities.forEach(function(r1,i1){
                            if(r1.id === currentIds[1]){
                                page.options[i0].cities[i1].cities.forEach(function(r2,i2){
                                    if(r2.id === currentIds[2]){
                                        page.options[i0].cities[i1].cities[i2].cities = cities;
                                    }
                                });
                            }
                        });
                    }
               });
            } else if(currentIdsSize === 4){
               page.options.forEach(function(r0,i0){
                    if(r0.id === currentIds[0]){
                        page.options[i0].cities.forEach(function(r1,i1){
                            if(r1.id === currentIds[1]){
                                page.options[i0].cities[i1].cities.forEach(function(r2,i2){
                                    if(r2.id === currentIds[2]){
                                        page.options[i0].cities[i1].cities[i2].cities.forEach(function(r3,i3){
                                            if(r3.id === currentIds[3]){
                                                page.options[i0].cities[i1].cities[i2].cities[i3].cities = cities;
                                            }
                                        });
                                    }
                                });
                            }
                        });
                    }
               });
            }            
        })
        .catch(function (error) {
            
        });  
    },
    handleItemChange(val){
      this.values = val;
      // console.log(val)
      let valSize = val.length;
      let page = this;
      if(valSize === 1){
        //第2级节点获取
        page.options.forEach(function(r,index){
            if(r.id === val[0]){
                page.getCNodes(r.id,val);
                return;
            }
        });
      }
      if(valSize === 2){
        //第3级节点获取
        page.options.forEach(function(r,index){
            if(r.id === val[0]){
                r.cities.forEach(function(r0,i0){
                    if(r0.id === val[1]){
                        page.getCNodes(r0.id,val);
                        return;
                    }
                });
            }
        });
      }
      if(valSize === 3){
        //第4级节点获取
        page.options.forEach(function(r0,i0){
            if(r0.id === val[0]){
                r0.cities.forEach(function(r1,i1){
                    if(r1.id === val[1]){
                        r1.cities.forEach(function(r2,i2){
                            if(r2.id === val[2]){
                                page.getCNodes(r2.id,val);
                                return;
                            }
                        }); 
                    }
                });
            }
        });
      }
      if(valSize === 4){
        //第5级节点获取
        page.options.forEach(function(r0,i0){
            if(r0.id === val[0]){
                r0.cities.forEach(function(r1,i1){
                    if(r1.id === val[1]){
                        r1.cities.forEach(function(r2,i2){
                            if(r2.id === val[2]){
                                r2.cities.forEach(function(r3,i3){
                                    if(r3.id === val[3]){
                                        page.getCNodes(r3.id,val);
                                        return;
                                    }
                                });
                            }
                        }); 
                    }
                });
            }
        });
      }
    },
    handleChange (v){
        let page = this;
        page.options.forEach(function(r0,i0){
            if(r0.id === v[0]){
                page.values = r0.id;
                page.texts = r0.name;
                r0.cities.forEach(function(r1,i1){
                    if(r1.id === v[1]){
                        page.values += ','+r1.id;
                        page.texts += ','+r1.name;
                        r1.cities.forEach(function(r2,i2){
                            if(r2.id === v[2]){
                                page.values += ','+r2.id;
                                page.texts += ','+r2.name;
                                r2.cities.forEach(function(r3,i3){
                                    if(r3.id === v[3]){
                                        page.values += ','+r3.id;
                                        page.texts += ','+r3.name;
                                        r3.cities.forEach(function(r4,i4){
                                            if(r4.id === v[4]){
                                                page.values += ','+r4.id;
                                                page.texts += ','+r4.name;
                                            }
                                        });
                                    }
                                });
                            }
                        });
                    }
                });
            }
        });
    }
  }
}
</script>

© 著作权归作者所有

共有 人打赏支持
无知的小孩
粉丝 1
博文 70
码字总数 19034
作品 0
贵阳
后端工程师
私信 提问
加载中

评论(1)

f
fox66
Mm
Vue 动态生成表单组件 - vue-generate-form

简介 Vue动态生成表单组件 可以根据数据配置表单 使用的UI库是iView 在Vue里 一般要用到什么组件或数据 都得提前声明 所以要根据数据来生成表单 只能使用Vue的render函数 要做这一个组件 其实...

谭光志
2018/12/28
0
0
vue elementui Cascader 级联选择器 省市区实现 问题

@无知的小孩 你好,想跟你请教个问题:你发的文章中的import的api中是什么,还有一个判断if中的depth是什么,求解答 我现在有个项目就是省市区街道用级联做四级联动的,感谢!...

caijunhui
2018/10/29
91
2
关于vue-area-linkage走过的坑

最近写的项目是vue框架,搭配element-ui框架。这个框架上手快,而且页面的大部分样式都有现成的可以用,使用起来比较方便。前几天有一个需求是要写省市区联动选择,上网搜罗了一遍之后发现了...

blueluu
2018/06/26
0
0
Vue初体验之Element的使用

1、安装,推荐在当前项目全局安装,同时确保vue ui正常使用。 使用安装完之后会自动启动,也就是在图形界面下创建项目。为了快捷的操作,这里还是使用命令行来创建项目。 2、使用cmd或是其它...

lvbin8023
02/06
0
0
ElementUI 2.5.0 发布,基于 Vue 2.0 的桌面端组件库

新特性 DatePicker 添加 属性(by @ziyoung in #13531) Tag 添加 事件 (by @licdream in #14106) DateTimePicker 支持 选项(by @eeeeeeeason) I18n 新增吉尔吉斯坦语(by @zzjframewor...

taadis
01/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

四、RabbitMQ3.7在CentOS7下的安装

安装依赖 sudo yum install -y gcc gcc-c++ glibc-devel make ncurses-devel openssl-devel autoconf java-1.8.0-openjdk-devel git 创建yum源 vi /etc/yum.repos.d/rabbitmq-erlang.repo [......

XuePeng77
今天
2
0
android 延长Toast的时长

示例:myToast(5000,"hello"); public void myToast(int showTime, String msg) { Toast hello = Toast.makeText(getActivity(), msg, Toast.LENGTH_SHORT); new CountDownTimer(......

雨焰
昨天
4
0
浅谈mybatis的日志适配模式

Java开发中经常用到的日志框架有很多,Log4j、Log4j2、slf4j等等,Mybatis定义了一套统一的日志接口供上层使用,并为上述常用的日志框架提供了相应的适配器。有关适配器模式例子可以参考 设计...

算法之名
昨天
13
0
大数据教程(13.6)sqoop使用教程

上一章节,介绍了sqoop数据迁移工具安装以及简单导入实例的相关知识;本篇博客,博主将继续为小伙伴们分享sqoop的使用。 一、sqoop数据导入 (1)、导入关系表到HIVE ./sqoop import --connect...

em_aaron
昨天
3
0
Git cherry-pick 使用总结

应用背景:假设现在有两个分支:dev_01, dev_02. 如果我想把dev_01分支上的某几个commit合并到dev_02分支, 那么怎么办呢? 这就是cherry-pick的工作了。cherry-pick会捡选某些commit, 即把某...

天王盖地虎626
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部