当前位置:首页 » 《关注互联网》 » 正文

【前端疑难杂症bug——el-cascader手动设置值、页面不回显bug】

13 人参与  2024年10月20日 12:40  分类 : 《关注互联网》  评论

点击全文阅读


el-cascader手动设置值、页面不回显bug

需求简介

使用el-cascader级联选择器,选择器之外有快速选择的功能

问题记录

当我使用了element样式框架中的级联、el-cascader的组件,绑定了cascaderValue时,这个数组是记录选择的叶子id。
我在级联选择器外边会有一个快捷选中叶子的标签,点击直接选中这个叶子。但是无论你怎么设置cascaderValue,他都无法在级联器中回显对应的叶子,也无法在组件中查看选中的标签展示,只是打开的时候会有颜色变化,并没有选中。
框架也没有对这个需求做明确解决方案,例如刷新渲染组件。

      <el-cascader         v-if="cascaderShow"        v-model="cascaderValue"        :options="list"         :props="{          multiple: true,           emitPath: false,          checkStrictly: true        }"         ref="cascader"        :size="size"       >      </el-cascader>      <span class="title">最近使用 </span>      <div class="recent-item" @click="(item)=>cascaderValue.push(item)" v-for="(item, index) in recentList" :key="index">{{ item.name }}</div>    </div>

解决方法

方案1
简单粗暴,将组件重新渲染,但是体验效果不好,用户会感知到页面的抖动
this.cascaderShow = false;setTimeout(() => {   this.cascaderShow = true;}, 0);
方案2(个人认为目前达成的最优方案)
查看了源码,手动设置的cascaderValue,代码中虽然能够选中对应节点,但是页面不会变化,因为需要点击elcheckbox才会触发内部的check属性为true。手动设置elcheckbox,还需要加入强制渲染,具体如下: 设置组件内部值
this.$refs.cascader.checkedValue = this.cascaderValue;
手动设置节点数据的属性check
(this.$refs.cascader.$refs.panel.checkedNodePaths || []).forEach(item => {          this.$set(item[item.length - 1], 'checked', true);        });
触发标签计算
this.$refs.cascader.computePresentContent();
强制刷新
this.$forceUpdate();
完美解决。

点击全文阅读


本文链接:http://zhangshiyu.com/post/174519.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 抽卡后,气运之子怎么都缠上来了小说(夏挽棠)(抽卡后,气运之子怎么都缠上来了)全书+后续+结局在线阅读
  • 前传爱意随风消逝续集:全文+番外乔清浅宋轻舟:结局+番外新上热文
  • 宋昭黎陆铭绪(假如从没拥抱你)前文+全本完整阅读预售作品抢先看
  • 终章小说搬空海港!我携军舰嫁军官躺赢了完结篇(温婉历战)已更新+延伸(搬空海港!我携军舰嫁军官躺赢了)清爽版
  • 贵妻在上:废材老公来护航完结篇(贵妻在上:废材老公来护航)章节目录+章节前文(宋锦瑶霍少霆)全章无套路在线
  • 离婚后,前夫一家给我跪下了隐藏剧情_明白双宿双飞江城必读文_小说后续在线阅读_无删减免费完结_
  • 乔芊芊顾宴夜小说(乔芊芊顾宴夜)(踹了渣男后,禁欲大佬为我失控)前传+阅读全新作品预订
  • 假如从没拥抱你小说(宋昭黎陆铭绪)全本完整阅读最新章节(假如从没拥抱你)_笔趣阁
  • 特工医妃,摄政王的腹黑掌上欢前言+后续_苏清叙裴玄褚最新阅读_小说后续在线阅读_无删减免费完结_
  • 热文推荐绑定站姐系统后,我成娱乐巨头了附加(沈霁月沈暨星)(绑定站姐系统后,我成娱乐巨头了)最新章节列表
  • 爱你的事当做秘密惊天黑幕_鹿言裴禹连载_小说后续在线阅读_无删减免费完结_
  • 和前夫穿越后又重生了番外+结局(挽星阙靖安)小说在线阅读

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1