当前位置:首页 » 《随便一记》 » 正文

前端小记--2.element-ui中级联选择器cascader如何默认展开下拉框

16 人参与  2024年03月30日 17:35  分类 : 《随便一记》  评论

点击全文阅读


最近做项目时,遇到一个需求:在一个排班表中,展示人员的值班情况,点击单元格,弹出下拉框,修改人员排班信息。

在这里插入图片描述
由于下拉框选择内容是树状结构,这里使用了element-ui中级联组件cascader,设置单选模式即可。但是在官方的文档中没找到默认展开下拉框的api,折腾了一番,只能去看下源码了。
在cascader组件源码中发现有个toggleDropDownVisible,调用这个api接口实现下拉框展示与隐藏。

...toggleDropDownVisible(visible) {      if (this.isDisabled) return;      const { dropDownVisible } = this;      const { input } = this.$refs;      visible = isDef(visible) ? visible : !dropDownVisible;      if (visible !== dropDownVisible) {        this.dropDownVisible = visible;        if (visible) {          this.$nextTick(() => {            this.updatePopper();            this.panel.scrollIntoView();          });        }        input.$refs.input.setAttribute('aria-expanded', visible);        this.$emit('visible-change', visible);      }    },...

这里我们只需用ref获取级联组件的对象,调用其toggleDropDownVisible方法即可默认展示下拉框。

this.$refs['cascader_' + id][0].toggleDropDownVisible(true);

小提示:通过v-for生成的对象,获取ref时,结果是个数组


点击全文阅读


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

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

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

最新文章

  • 我无名分,我不多嗔小说完结篇(陆景铄林悠悠)(我无名分,我不多嗔)全书无套路阅读无广告小说大结局
  • 奈何春风不曾渡我虐心反转_童烟沈叙白陆依在线看_小说后续在线阅读_无删减免费完结_
  • 鹿雪附加完整在线阅读(小祖宗她带着双宝闹翻天)最近更新列表
  • 你要战功我给你,妖兽入侵你哭啥高质量好文叶天凌筱完本_你要战功我给你,妖兽入侵你哭啥高质量好文(叶天凌筱)
  • 夫君和小三霸占了我的将军府,我杀疯了阅读_雪儿谭绍木兰全集_小说后续在线阅读_无删减免费完结_
  • 鹿溪小说(鹿溪)终章+番外(穿进恐怖游戏后,我和反派HE了)一口气阅读
  • 完结文留给儿子的副卡月月刷爆,他却因睡桥底被送进收容所列表_完结文留给儿子的副卡月月刷爆,他却因睡桥底被送进收容所(娄墨霆宋佑轩)
  • 你活着,却死在我等你的第三年后续+番外_谨言佳佳温以宁全集_小说后续在线阅读_无删减免费完结_
  • 相思溺于夏时雨小说(裴景澈初念可)章节目录+起始篇章(相思溺于夏时雨)全章无套路在线
  • 未婚夫重生归来叫停手术,把剥开肚子的我困在手术台上40分钟(裴临渊阮离歌)
  • 完结文离婚是你提,净身出户你又哭什么精彩分享列表_完结文离婚是你提,净身出户你又哭什么精彩分享(苏铭余素伊)
  • 全书浏览哥哥重生救我,我带队灭了组织!(陈致远陈知韫)_哥哥重生救我,我带队灭了组织!(陈致远陈知韫)全书结局

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

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