element-ui
文章平均质量分 52
nothing_more_than
过去的已经过去,不能说明什么。唯有不断努力才能不负今生!!!
跌跌撞撞,我才发现原来算法才是大道!
展开
-
自定义表单元素组件内容变化触发ElForm重新校验
写一个FeeTypeSelector的组件,它的属性大概是这样的// 可选项的数据.......通过接收参数modelValue和触发update:modelValue让FeeTypeSelector组件支持v-model。至此这个组件就大致上写好了。把它放入带有规则的FormItem中,也能正常的校验。不过我今天发现,Element Plus的表单输入组件在有校验错误后再次输入正确的值后校验错误会自动消失,而不需要点击提交按钮调用form.validate方法,而上面的自定义组件就不能。原创 2024-05-02 18:44:51 · 761 阅读 · 1 评论 -
el-radio-group change事件获取老值
先说问题,在点击el-radio时,需要先判断一下,根据判断结果决定本次点击是否有效,直接用v-model是实现不了这种效果的,所以就需要把v-model拆开——绑定value属性和监听它的input或change事件,在input或change中判断,真正需要起作用时把value绑定的值改掉。通过查看文档发现el-radio-group(因为我把el-radio放到了el-radio-group中)有change事件,就下意识的认为el-radio-group是通过value属性和change事件来实现v原创 2021-12-06 14:16:45 · 17768 阅读 · 2 评论 -
v-infinite-scroll指令不能加载第二页的问题调查和解决
v-infinite-scroll指令用起来还是不错的,可以满足日常需要。有一天,产品经理突然找到我说,页面只能展示第一页,后面的数据都没有。过去看了一下,在不用搜索条件查询的情况下,应该会有很多数据,不能能只有一屏的。底部页面显示“到底”的字样,那么可以肯定的是,代码有bug。我的天呀,美好的一天就这样被打破了,查吧,毕竟是自己负责的项目,保修是最低的标准吧,好了,玩笑开完了,言归正传。经过调查,发现是因为在第一屏加载后,内容的高度并没有让容器出现滚动条,这样就不会触发scroll事件继续加载了,这真原创 2021-06-19 16:44:23 · 1169 阅读 · 2 评论 -
使用el-tree支持保留源节点的拖放操作
产品的需求千奇百怪,在成长中的产品的需求更是。最怕的是到处抄,然后四不像,苦了开发人员了。话说我们需要一棵树,这个树上有中间节点(文件夹)和叶子节点。然后这些数据会来自两个系统,代表的含义也不相同,就这样优秀没有办法,这都不是事。事情是支持某些文件夹下的节点(包括子中间节点和叶子节点)能拖放到另外一些节点里面,这也不是事,el-tree能支持。可怕的就是,一些拖放是删除源节点的操作,就像移动操作;另一些拖放是保留源节点的操作,就像在目标节点下创建了副本,哈哈,就是这么有意思:(删除源的移动是el-tre原创 2021-05-25 06:30:51 · 1587 阅读 · 1 评论 -
el-form中rules的原理简介
一直以来我都没有搞懂el-form的rules究竟是怎么工作的,我只是按照文档画瓢而已。这次有个需求把界面上的el-select替换成树形的下拉框,只能自己封装了,同时这里用到了rules,没办法我只能让自定义的树形组件(我取名叫DropdownTree)支持rules了。可是我对这个一无所知!!!把拉代码吧,还能怎么办呢?经过艰苦卓绝的一个小时,总算搞懂了。我下面尝试总结一下当表单元素(比如el-input),在value变化或blur时,会触发el.form.change和el.form.blur原创 2020-12-02 09:46:42 · 5187 阅读 · 2 评论 -
把可选择的el-tree中选中的节点单独用一个棵树显示解决方案
有时候我问自己,为什么我干的前端的跟别人干的不一样,人家都是写写h5页面啥的就好了,为什么我非得那么苦逼的魔改各种组件,产品就不能按照现有的组件库设计产品吗?唉,说多了都是泪。不过这个也能让我有一定提升,只是这个提升是时间的极度浪费来达到的,毕竟在已有组件上就行修改还是很难的,总归是受限的。不说了,直接进入正题 吧。先看个截图,一图胜千言!!!左边是一个棵完整的树,右边是选中的节点组成的树。我做过很多系统,一般都是用一棵树就搞定了,毕竟左边的树上已经有选中和取消选中的操作了。无奈产品经历非得说在树很大的原创 2020-11-15 14:43:29 · 2203 阅读 · 8 评论 -
编译element-ui的文档
这里介绍一下编译element-ui文档,以及本地访问。如果电脑可以正常联网,那么打开element-ui在线文档没什么问题。我所处的环境是严格限制外网访问的,所以我就本地编译后放在了一个服务器上,让公司的小伙伴可以方便的访问。前提条件前提条件这里假设已经clone了element-ui的源代码,并且已经安装了依赖包编译文档npm run deploy:build如果没有意外是一定可以编译成功的,在examples/element-ui中就是编译好的文档了。你可以把它放到nginx的目录里面原创 2020-11-15 10:02:23 · 826 阅读 · 0 评论 -
el-table实现多级表头
el-table还是很好用的,比如它的合并相同内容的单元格功能,就是算法有时候会很烧脑。el-table支持多级表头,实现起来也很简单,只要在模板里面把el-table-column嵌套就好了。不过问题也就出来了,如果是简单的两级嵌套这没什么难度,要是我想实现不定深度的嵌套,怎么办呢?我想递归是一个好的解决方案吧,Vue组件怎么递归可以参考这里下面我就介绍一下我的思路,实现的不是很完美,也就是说还没有到生产代码的级别,还要在实际中调整。我会创建一个TableColumn.vue<templat原创 2020-10-11 09:22:46 · 5376 阅读 · 0 评论 -
element-ui中cascader选中值展示改造,按照第一栏类别分组展示
cascader中选中的值有两种展示方式,全部展开、收起。如下图可惜这两种都不是我要的。我需要的是,第一个栏目中的元素不能选中,其中每个项目表示一个类目。选中值显示的规则是第一栏目中的项目只显示一次,如果同一个项目下的子节点选中了一个就直接展示该子节点的文字,否则显示该项目的名称+等x项。具体代码如下import { Cascader } from 'element-ui'function getRootNode (node) { return node.pathNodes[0]}con原创 2020-08-26 09:11:03 · 2052 阅读 · 0 评论