![](https://img-blog.csdnimg.cn/d9505e99d21a45f19979b89b38e260ab.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
element-ui
文章平均质量分 50
解决element-ui使用中的一些bug,以及改造组件
流浪码农~
你为什么想不开要当程序员?
展开
-
el-tag之间为什么会有间距?
在项目里使用多个el-tag,两两之间会有一个小间距。但是el-tag源码,是没有用 .el-tag + .el-tag兄弟选择器来作用margin的。也就是,他本身,是没有间距作用的。所以怀疑,是不是我项目里的其他css代码作用到了el-tag。但是全局搜索了.el-tag。也并没有找到这个css样式。后来查了半天,发现是lnline-block的特性。查看element-ui文档的官网,发现也是有间距的。即使把他作用的margin-left:10px去掉后,也还是有个小间距。原因就是因为,spa原创 2022-05-26 11:15:20 · 2104 阅读 · 0 评论 -
页面跳转,el-tree动态设置选中节点样式
需求就是从A页面点击名称,跳转到B页面,选中B页面的树节点并查询对应的数据。这里的树形结构,并没有使用勾选框,选中的样式也进行了一些修改。一开始没发现el-tree有设置默认选中的属性,还在想怎么操作dom实现该功能。仔细看文档还是很重要的~current-node-key可以实现我们想要的功能。但是有些坑需要注意。1.先重写el-tree-node 选中的默认样式.。观察dom发现点击树节点后该节点会加上is-current样式,所以主要是修改is-current的样式类。 .原创 2021-09-03 14:06:58 · 7569 阅读 · 1 评论 -
解决多个el-checkbox内容不对齐,限制一行六个
别问,问就是提的需求。因为原来就是无脑遍历数组,也没有想过超出一行,出现多个时,排列的问题。原代码因为有的项是两个字,有的三个字。字数不一样会导致上下不对齐。对齐的问题可以给el-checkbox设定一个固定宽度来解决。但这里要求一行六个,我还在想,这不是还得切割数组,分成多份6个再组合,再使用v-for进行遍历。或者写样式,一行平分六份。一想到这么麻烦就不想写, 这时候突然就想到可以借助el-col来快速实现。一行默认是24列,那我只要每个el-checkbox都设置为el-col.原创 2021-09-29 10:55:29 · 7855 阅读 · 12 评论 -
el-popover中嵌套弹窗,点击选择时,弹出层就关闭的解决方法
因为业务需要,所以使用的弹出层里还需要嵌套弹窗。我这里的弹出层绑定了v-model。手动控制popover的显示隐藏。正常想法就是,在点击选择时,在选择的方法里,this.popover_visible = true 让弹出层显示。但是一直没有效果。查阅了一下资料,el-popover是会根据body的点击事件来进行显隐的。如果点击了非弹出层包裹的内容,那么弹出层就会关闭。所以,我弹框的选择按钮,应该是点击的时候冒泡了。这时候只要 将click事件 加上stop修饰符。如@click.s.原创 2021-09-13 14:44:29 · 5777 阅读 · 10 评论 -
el-form表单对象内还嵌套对象,绑定的prop规则校验会失效
继续踩坑~。因为受限于后端返回的数据格式,整个表单是个对象,但是里面还会嵌套对象。而我们在绑定字段时,自然而然是去绑定最里层的字段。el-form的model是去绑定大的表单对象。而我这里的表单项则是绑定final_transfer.acc_profit_name。但我这里prop写的是acc_profit_name。对应规则里面的prop。按官方文档的,如果表单对象不涉及嵌套,这样绑定是没问题的。但如果涉及到了嵌套。我们这里这样绑定prop,即使表单的值改变了,校验也还是会存在。解决.原创 2021-11-25 10:43:46 · 5888 阅读 · 6 评论 -
el-tree自定义文本,内容超出容器时,横向滚动条不起效
一天一个坑,这个问题搞了一个下午,岂可修,一口老血吐出来了QAQ先上代码主要是el-tree下的el-tree-node是个div,块级元素,导致我怎么设置,滚动条都不出来。代码如下,将其设置为inline-block; // 内容溢出,设置横向滚动条 .el-tree { width: 100%; overflow: auto; } /deep/ .el-tree > .el-tree-node { .原创 2021-09-24 16:48:41 · 1541 阅读 · 0 评论 -
element-ui的表单,使用v-if进行显隐表单项时,有时不触发规则校验
又双叒踩到坑了。在写一个表单时,因为区分多个类型,切换不同的类型,表单项要进行显隐。那就一股脑用v-if根据类型去显隐,这时候发现在切换类型之后,有的表单项规则校验不生效了, 就纳闷了。然后猜测是不是因为用了v-if,dom重新渲染导致表单的prop规则校验不重新触发。去掉v-if后,果然可以了。解决方法:v-if换成v-showel-form-item添加唯一key因为我需要切换类型时,对应所需的表单项,所以第一种方式不符合我需求,采用第二种。...原创 2021-11-22 17:05:52 · 3211 阅读 · 0 评论 -
element-ui的el-col没有数据,其内容为空时,不占据空间的问题
在写页面时,用了el-row和el-col进行布局。对接接口,v-for渲染数据 到对应位置时,发现了这个问题。第一次遇到,作个记录。htmlamtn_total_debit 应该是空的, amtn_total_credit为260.50,是有数据的,应该出现在右边。但由于第一个没有数据,el-col会直接不占据空间,把右边的el-col挤到了左边解决办法给el-col加一个透明边框,这样即使没有内容,也会默认占据空间。视图渲染就不会出错了。效果:...原创 2021-08-17 10:35:03 · 4388 阅读 · 3 评论 -
el-autocomplete扩展使用-底部增加固定操作行
修改el-autocomplete下拉列表的样式继上一篇文章,需求需要修改下拉列表的宽度后。又来新活了,这次需要在下拉列表底部增加一个快捷新增按钮,如图所示。看了一遍文档,el-autocomplete并没有提供这样的底部插槽。只有一个item的插槽,可以自定义模板。但这只能控制每一项的内容,并不能在底部添加一个自定义内容,除非通过操作dom的方式去动态添加。在准备放弃使用el-autocomplete,改用el-select来实现需求的时候。我在element-ui的官网发现了他的搜索框,使原创 2022-04-15 09:46:20 · 2503 阅读 · 3 评论 -
使用element-ui的el-input,谷歌浏览器忽视autocomplete:off的问题
今天碰到个bug,在选地区级联的时候,浏览器会把已有的地址带出来。如下图,这样的话,地址框就会挡住el-cascader的选择。但其实,element-ui的组件,input都是把autocomplete属性默认设置为off的。不应该有自动补全才对。然后去查了一下,发现是谷歌浏览器直接忽视了autocomplete属性参考这里的描述https://stackoverflow.com/questions/12374442/chrome-ignores-autocomplete-off解决办.原创 2021-11-09 11:44:42 · 3027 阅读 · 0 评论 -
ElementUi el-autocomplete 踩坑 (使用clearable清除,点击输入框下拉条件不再显示)
今天在写组件的时候,用到了el-autocomplete来做模糊搜索。因为要可以清除条件,所以加了clearable属性,然后遇到了个bug。点击清除图标后,如果你已经是聚焦状态了,你在点击输入框,下拉框不会再显示了查了一下,是因为有element-ui源码有bug,主要原因是参考该博客autocomplete组件在执行清除事件时,将activated置为false。这时候下拉框不会显示了,而在querySearch执行成功后又没有将activated置为true。所以导致了该bug。解决的核心.原创 2021-10-14 17:34:26 · 9502 阅读 · 13 评论 -
修改el-autocomplete下拉列表的样式
碰到一个需求,我这里使用el-autocomplete,因为列表的内容可能很长,导致显示不全,影响阅读。所以需要修改一下下拉列表的宽度为auto,使得其适应内容宽度,而不是继承父元素宽度。一开始使用深度作用选择器,发现作用样式不生效,查看dom结构发现是因为下拉列表的class是插入至body下的,而不是vue app 下。所以无法作用到。解决方法:将popper-append-to-body设为false,然后再使用深度作用选择器。上代码 <temp.原创 2022-04-08 15:27:55 · 6377 阅读 · 8 评论