
vue+element
文章平均质量分 54
我在小楼听着风
这个作者很懒,什么都没留下…
展开
-
elementUI时间选择器(el-date-picker)输入格式的转换与自定义
目录1、背景2、方案设计3、说明1、背景现在很多的web端管理系统会选用vue+element-ui这套技术体系去实现前端界面开发。在使用时间控件的时候的时候,很多用户会希望输入202103100915能够显示成2021-03-10 09:15或2021/03/10 09:15等,总而言之就是输入方便,显示优美。效果如下图所示:2、方案设计刚刚听SA给我提这个需求的时候,我的第一反应就是去Element官网看看是否有什么属性支持自定义输入的,还真别说,找到了下面两个属性,于是就迫不及待的拿来试了试原创 2021-03-10 14:50:18 · 13805 阅读 · 16 评论 -
获取当前聚焦元素在父元素中的下标--原生JavaScript
这里写自定义目录标题1、场景2、处理跳转不到结束日期的问题1、场景在做关于el-date-picker时间控件的enter键切换时,type="datetimerange"时,在开始时间的input中按enter键,会直接切换到下个控件,不会聚焦到结束时间的input中,这是因为开始和结束时间的input是在同一个控件里。如下所示:2、处理跳转不到结束日期的问题实现思路:【1】时间控件中会有两个input元素,如下图:【2】获取当前聚焦的元素,看它是否是结束日期所在的input,若是,则跳转原创 2021-03-03 15:53:46 · 438 阅读 · 1 评论 -
el-form,当表格校验遇上v-if,怎样处理表格校验不生效的问题
1、场景在实际工作开发中,我们在处理el-form表单校验问题时常会遇到这样一种情况:根据不同的条件,展示不同的el-form-item,这个时候我们就需要考虑表单元素的显示与隐藏。在vue中,控制显示隐藏的有两个指令:v-if和v-show。【1】两者不同点:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐;【2】原理:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基原创 2020-12-28 17:49:46 · 3879 阅读 · 5 评论 -
elementUI中如何在Tabs标签页的标题文字后面添加文字或图标
1、效果如下:实现代码如下:<el-tab-pane name="first"> <span slot="label"> <span class="span-box"> <span>预警</span> <el-tooltip class="item" effect="dark"原创 2020-12-08 11:18:45 · 8393 阅读 · 4 评论 -
element-ui中有关el-input聚焦时全选内容功能的实现
这里写自定义目录标题一、el-input聚焦时全选文本一、el-input聚焦时全选文本在开发过程中,为了实现更好的用户体验,我们在使用input输入框时有时候需要得到焦点的同时全选文本,下面是实现方案。<el-input @focus="getInputFocus($event)" clearable v-model="consignorName"></el-input> getInputFocus(event) { console.l原创 2020-11-18 19:13:15 · 8476 阅读 · 5 评论 -
vue自定义指令的实现-推荐三种指令element-ui表单焦点切换、防止按钮连击、element-ui弹框拖拽
目录标题标题原创 2020-10-21 17:48:42 · 1074 阅读 · 0 评论 -
ElementUI -- 表单嵌套表格,v-for生成的表单项实现表单验证。
1、界面代码: <!-- sku组合可视化显示 --><el-form :model="listModel" ref="skuListForm"> <el-table v-if="skuVisible" :data="listModel.sku_list" border stripe> <el-table-column type="index"></el-table-column> <el-tabl原创 2020-07-21 11:37:40 · 1908 阅读 · 0 评论 -
vue中retry的使用--解决axios请求超时的问题
1、使用场景(1)后端接口请求超时。(2)后端接口报错。(3)弱网状态下,重新请求。2、实现步骤axios中的使用以下代码都是在api.js中进行操作:(1)先进行axios的配置://设置全局的请求次数,请求的间隙axios.defaults.retry = 3; // 请求次数axios.defaults.retryDelay = 2000; //请求间隙(2)设置拦截器axios.interceptors.response.use((res) => { // 拦截器原创 2020-07-17 15:41:33 · 2384 阅读 · 0 评论 -
el-input绑定键盘按键--按键修饰符
常用按键修饰符别名修饰符键值修饰符对应按键.delete.8/.46回格/删除.tab.9制表.enter.13回车.esc.27退出.space.32空格.left.37左.up.38上.right.39右.down.40下鼠标按键修饰符别名修饰符可用版本对应按键.left2.2.0以上左键.right2.2.0以上右键.middle2.2.0以上原创 2020-05-30 11:28:55 · 1168 阅读 · 0 评论 -
elementUI的el-table单元格中显示多张图片,并能点击放大查看
如何在el-table的单元格中显示多张图片具体效果图如下图所示:主要的实现思路就是在template中添加一个span标签,然后做一个v-for的循环,去加载数组中的每一张图片,具体的实现代码如下<el-table-column label="社圈动态图片" align="center" width="265px"> <template slot-scope="scope"> <span v-for="(item,index) in scope原创 2020-05-25 14:23:40 · 8960 阅读 · 12 评论 -
elementUI如何实现table表格中图片的鼠标移入/点击显示
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...原创 2020-05-07 10:01:06 · 7388 阅读 · 11 评论 -
ElementUI中switch开关的使用--关于如何将文字显示在按钮上的实现
这里写自定义目录标题有关于element中switch的用法实现的效果图具体实现步骤:有关于element中switch的用法el-switch的详细用法实现的效果图具体实现步骤:(1)添加html代码的显示,此处写了class="switch"类名,是为了避免造成全局样式的污染。 <el-table-column label="上下架" align="center">...原创 2020-04-28 16:04:12 · 7096 阅读 · 15 评论 -
vue+elementUI,实现表单验证中的图片上传验证(el-form与el-upload)
目录简介el-form表单的实现及非空验证el-upload,只允许上传一张图片的实现步骤el-form中,实现el-upload的验证简介目前在做一个商城后台管理系统,在实现表单的过程中需要上传商品图片、二维码、头像等,每次只能上传一张,并且需要进行相关的非空验证,以下是具体的实现思路,希望能帮到大家。el-form表单的实现及非空验证本文所实现的表单验证是普通的输入验证,若想自定义表单...原创 2020-04-21 17:35:34 · 14940 阅读 · 22 评论