首页 > 其他 > 详细

el-cascader 级联选择器使用时遇到的一些问题

时间:2019-02-23 19:16:02      阅读:1893      评论:0      收藏:0      [点我收藏+]

Element UI Cascader官网文档

<el-form-item label="章节" style="margin-right: 64px">
            <el-cascader
              ref="cascader"
              :value="contentChascascader" //是数组,存的是当前数据的value。一般是多个值
              :props="this.$store.state.selectorMod.cascaderProps"
              :options="this.$store.state.selectorMod.contentChas" //渲染数据
              :show-all-levels="false" //输入框中不显示选中值的完整路径
              :change-on-select="true"
              @change="handleContentChaChange"
              style="margin-bottom: 10px;width: 240px;"
             >
            </el-cascader>
 </el-form-item>        

 

技术分享图片

 

 

我遇到的问题:当进入到编辑页面时,后台传来的只有最后一级的id,也就是说value数组里存的只有一个数,没有父级的id。这就导致无法在选框中显示出来label

解决办法:因为可以从后台获取到整个数据结构,发现子对象都有parentId这个属性,所以编写了getCascaderObj方法手动获取级联id。

思想:拿到value值,遍历options

getCascaderObj(val,opt) {
      var thisVue=this
      return val.map(function (value) {
        for (var itm of opt) {
          if (itm.id == value) {
            // console.log("成功匹配")
            thisVue.chapterArr.unshift(itm.id)
            // console.log("第二步找父级。。。")
            // console.log("parentId:"+itm.parentId)
            thisVue.getCascaderObj([itm.parentId],thisVue.$store.state.selectorMod.contentChas)

            return
          }else{
            if(thisVue.isHasChid(itm)){
              thisVue.getCascaderObj(val,itm.childs)
            }
          }
        }
        return null;
      });
    },

注意:上述方法中的参数val应该是一个数组。

 

另:

给 cascader 组件一个别名,然后用 this.$refs[关联组件名].currentLabels 就能取到选中的 labels

 

el-cascader 级联选择器使用时遇到的一些问题

原文:https://www.cnblogs.com/shenting/p/10423763.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!