- VisualStudio2022插件的安装及使用-编程手把手系列文章
- pprof-在现网场景怎么用
- C#实现的下拉多选框,下拉多选树,多级节点
- 【学习笔记】基础数据结构:猫树
公司有经常需要做一些后台管理页面,我们选择了Element Plus,它是基于 Vue 3,面向设计师和开发者的组件库,是Vue框架生态中比较火的UI组件库,组件库丰富易用,组件链接:一个 Vue 3 UI 框架 | Element Plus,项目中经常会用到el-select多选功能,组件自带的多选交互也是非常棒的,标签回显示结果,同时支持通过标签取消选择,对于Element Plus 2.5以上版本还支持通过slot自定义回显tag 。
最近在开发一个产品提的优化功能,部分表单需要由单选切换到多选,对于强大的Element Plus来说el-select增加一个属性multiple即可实现多选,确实好用,一个属性就实现了从单选到多选的功能于是开心的提测了,跟测试说很简单的功能,你点点就能测完了,提测半小时不到测试直接找到我,说我坑它,这么大的错位问题,跟我说点点就行了,我当时一脸尴尬,测试反映的问题如下图:
于是特意看了一下el-select在页面上结构,发现它是回显在的样式名为el-select__tags的元素中的,而它又是通过定位实现盖在输入框上的,它的定位又是相对于样式名为el-select的根元素的,但整个表单又用了grid布局,同一行有一项撑高,别的项都会跟着撑高了,所以导致定位出现了偏差 。
可以给el-select组件包一层,这样撑高的只会是包的这一层,不会影响组件自身,问题解决 。
既然它定位是相对于样式名为el-select组件根元素,那我们何不修改它的相对定位元素了,把它改到样式名为el-tooltip__trigger的元素上即可,其实这里又发现组件库的另一个小问题,一个元素出现了二个同样的样式名 。
既然多选导致表单撑高,那我们有什么方法不让它撑高么,查询了组件文挡,发现了二个可用配置,给组件添加collapse-tags属性,无法显示的时候它会在后面显示一个+N的标签,告诉用户后面还有多少个,如果只是增加一个+N的标签,对于用户来说不是很明显当前到底选了哪些项,这时你再添加collapse-tags-tooltip属性,你会发现这交互就非常棒了,详见下图:
个人推荐使用第三种,侵入性小,修改工作量也是最小的,也是我用的方式,同时也保证了表单布局格式的统一,不会因为多选而导致表单有高有低影响美观,当然解决些问题的方法千千万,其中我也尝试让它超出显示省略号,超出滚动条等,但是尝试体验都不太理想。如果你有更好的解决方案,欢迎留言分享,一起讨论进步.
最后此篇关于ElementPlus组件库el-select组件多选回显踩坑的文章就讲到这里了,如果你想了解更多关于ElementPlus组件库el-select组件多选回显踩坑的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我升级了 Java EE Web 应用程序以使用较新的 PrimeFaces 版本,突然在 PrimeFaces commandlink 的操作属性中调用重载 bean 方法不再起作用。我尝试使用 J
考虑以下代码片段。 var SomeView = Backbone.View.extend({ collection: new SomeCollection(), render: fu
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
我的 JSP 在 Tomcat 7 中运行良好,但在 Tomcat 6 中不起作用,我认为这是因为您不能从 EL 2.1 调用方法(getter/setter 除外)。 我需要调用的方法不能命名为ge
这个问题在这里已经有了答案: How to nest an EL expression in another EL expression (2 个答案) 关闭 5 年前。 我有 Java 枚举类型,
为什么会这样? ....Some Code 在我的 profielForm 中,我只有一个 getCityOptions() 方法,没有 cityO
我正在关注 backbone.js tutorial并遇到了 2 个函数 initialize() 和 render()。 initialize() 在附加一些 html 时使用了 $(self.el
对于给定的示例,this.el 和 this.$el 之间有什么区别? 我知道 this.$el 指向 this.el 的 jQuery 对象,在本例中是 'li'。 当我呈现 View 时,我可以在
我一直在我的主干应用程序中使用 this.$el,如下所示: render: function() { this.$el.html(this.template); }, 然后我在网上看到代码使
我想使用 EL 在 jsp 中调用一个传递给它的参数的 bean 函数。问题是它不允许这样的事情:“${teacherBean.certificationFor(${particularField})
有没有办法可以在 EL 中获取 ServletContext 中设置的属性,使其最终成为 JavaScript 变量? 我将其设置为 context.setAttribute("testing.por
我正在编写 JSP/JSTL,并且我正在尝试遍历数据库中的几个项目。 我目前在数据库中有三列,${image1} , ${image2}和 ${image3} .我正在尝试使用以下代码为他们打印信息:
this.$el.html 和 this.$el.append 在渲染模板时有区别吗?我对 js、backbone 等完全陌生。在我正在从事的当前项目中,我看到类似 this.$el.append(P
我刚刚学习了一些主干教程,我有一个一般的 jQuery 问题,我实际上已经想知道了一段时间。 有时我会在 jQuery 选择器中看到带有第二个参数的调用,例如 $('ul', this.el)。 选择
有没有办法在 SpEL 中调用静态接口(interface)方法?例如: T(java.util.stream.IntStream).of(new Integer[]{1,2,3}).sum() 当我
这个问题已经有答案了: If a DOM Element is removed, are its listeners also removed from memory? (6 个回答) 已关闭 5 年
JBoss EL resolver online documentation中有这句话: It's important to fully understand how this extension t
使用 JSF 2.0 和 EL,我试图在 POJO 上调用一个方法,它是一个 viewscoped bean 的一个属性。该代码实际上与 @BalusC 非常相似的教程here .当我调用一个不带参数
所以我整个下午都在 this problem 上卡住了我最终解决了。原来我分配的是 el 而不是 $el。 两者有什么区别,我应该在什么时候使用它们? 最佳答案 直接来自 the documentat
我正在努力学习 Backbone 。我知道 el 是正在执行的元素。如果未指定,则为空 div。我正在我的 View 中创建一个模板并返回 View 对象。然后我正在渲染 View ,但我不明白为什么
我是一名优秀的程序员,十分优秀!