需求:1.点击下拉框请求一级数据,选择一级请求数据获得二级数据,选择二级数据获得三级数据    2.任意一项都能够被选中

实现效果:

 

 实现过程:

  <el-cascader
     v-model="partyOrganId"
     :show-all-levels="false"
     ref="sysCascader"
     :props="prop"
     @change="handleChange($event)"
     clearable>
  </el-cascader>

数据:

 prop: {
              lazy: true,
              checkStrictly: true,
              lazyLoad(node, resolve) {
                  setTimeout(() => {
                      if (node.level == 0) {
                          self.$API.getFirst()
                              .then(res => {
                                  const cities = res.data.map((value, i) => ({
                                      value: value.id,
                                      label: value.request_name,
                                      leaf: node.level >= 2
                                  }));
// 通过调用resolve将子节点数据返回,通知组件数据加载完成
                                  resolve(cities);
                              })
                              .catch(err => {
                                  console.log(err);
                              });
                      }
                      if (node.level != 0 ) {
                          self.$API.getFirstTwo(node.value).then(res => {
                                  const areas = res.data.map((value, i) => ({
                                      value: value.id,
                                      label: value.request_name,
                                      leaf: node.level >= 2
                                  }));
// 通过调用resolve将子节点数据返回,通知组件数据加载完成
                                  resolve(areas);
                              })
                              .catch(err => {
                                  console.log(err);
                              });
                      }
                  }, 1000);
              }
          },

获取选中数据:

handleChange(event) {
            let pathvalue = this.$refs.sysCascader.getCheckedNodes()[0];
            if(event.length==1){
                this.secondQuestionName='';
                this.questionName='';
                this.firstQuestionName=pathvalue.label;
            }else if(event.length==2){
                this.firstQuestionName='';
                this.questionName='';
                this.secondQuestionName=pathvalue.label;
            }else if(event.length==3){
                this.firstQuestionName='';
                this.secondQuestionName='';
                this.questionName=pathvalue.label;
            }

        },

 

GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45 8 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 8 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐