element-ui中的el-cascader 级联选择动态加载数据回显问题,输入框中不显示默认的文本

       一直比较喜欢使用element-ui,在近期项目中有用到element-ui中级联选择,遇到了一个问题:在编辑详细信息的时候,原来已有的值无法显示的问题,经过研究发现有两种情况,

      一.显示最后一级节点的时候即设置(emitPath=false和show-all-levels=false),

     由于数据是动态加载暂时还没有获取最后一级的节点数据(也没有全路径),所以input输入框中 正常是无法显示默认值得name,或者显示全路径,初始默认值必须要满足[上上级code,上级code,code]这种全路径格式才可以正确回显,但是项目只记录最后一级code

  所以本人的解决方式是:

    让服务端在详细信息接口中不单单返回对应的value,也把label返回然后将label手动赋值给输入框中显示,如下模拟了一下数据:

     模拟返回label

el-cascader的用法:

最重要的一步(注意本人封了一层所以简单的用了两个$ref,):

这样就可以完成数据回显了效果如下:

二.展示全路径的方式默认数据回显只是简单试了一下,初始默认值必须要满足[上上级code,上级code,code]这种全路径格式可以正确回显,

 

上述问题解决是基于element2.13.1版本,仅供参考