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