问答

elementUI中<el-cascader使用动态加载时的默认值问题

作者:admin 2021-06-10 我要评论

在element中用el-cascader标签的 lazyLoad (动态加载)遇到一个问题,就是例如我是“编辑”的,所以打开时就要有一个值,但是这组件我发现,编辑时给他赋了值也...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

在element中用<el-cascader标签的lazyLoad(动态加载)遇到一个问题,就是例如我是“编辑”的,所以打开时就要有一个值,但是这组件我发现,编辑时给他赋了值也不显示,这个有人遇到过没?

###

因为是动态加载,编辑回显也是需要提前把数据加载出来的,赋值之前列表数据已经有了么?

###

最后怎么解决了呢?我是听过强制重新渲染来解决的

###

我的解决方案是偷了个懒,让后台同时给了上次选中的value值和label的值。然后vue文件中data里面新增两个字段来保存,一个是保存value的数组,一个是将label拼接“/”后作为字符串保存起来,当该字符串有值时就把el-cascader的placeholder的值设置为这个字段,并且在placeholder有值时,动态添加一个class将el-cascader中placeholder的字体颜色设置为有输入值的颜色(添加的class >>> .el-input__inner::placeholder { color: #606266;})。想了半天,另辟蹊径,最简单暴力的方法... 捂脸 当然这种操作方式对不开放搜索功能的el-cascader比较友好,反正是动态加载的子节点,搜也搜不出来,如果是加了filterable属性的,一获取焦点的时候placeholder值就没了.

###

我的解决方案是

编辑状态下用一个el-select回显当前的选择项,当然是要初始化数据的值的, 点击变更, 给这个select隐藏, 把cascader显示出来

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • elementUI中&lt;el-cascader使用动

    elementUI中&lt;el-cascader使用动

  • 微信公众号H5页面链接蓝牙设备

    微信公众号H5页面链接蓝牙设备

  • for range和for i输出的结果不一样

    for range和for i输出的结果不一样

  • vue+Electron 异步组件报错?

    vue+Electron 异步组件报错?

腾讯云代理商
海外云服务器