elementUI
文章平均质量分 52
丿刘先森
努力,奋斗!
展开
-
elementUI tooltip箭头样式(表格自定义)
需求:修改 table 中 tooltip 的样式及位置。尝试:但是表格中 tooltip 默认是挂载到body中的,修改当前表格 tooltip 样式,全局都会受影响,原创 2021-06-01 11:47:45 · 5068 阅读 · 0 评论 -
elementUI dialog弹窗相关问题
打开dialog,内容被遮罩层挡住了这是因为遮罩层默认是插入到body元素上的,所以会遮挡当前的内容,修改dialog默认属性即可// dialog标签添加下面属性// 作用:遮罩层是否插入至 body 元素上,若为 false,则遮罩层会插入至 Dialog 的父元素上:modal-append-to-body="false"使用双层嵌套的dialog时,关闭内层的dialog,而遮罩依然存在这是因为,在使用双层嵌套的dialog时,需要将dialog全部内容插入到bo..原创 2021-03-12 18:31:18 · 1222 阅读 · 0 评论 -
elementUI checkbox选中回显操作注意事项
具体的详情介绍请看,elementUI checkbox。checkbox的回显操作是基于el-checkbox-group 标签v-module绑定的数组来实现回显,这个数组可以是一维数组,也可以是数组对象,具体使用那个都行,不同点在于,el-checkbox 标签绑定的lable值的不同,如果 group 标签绑定的是数组对象,则 lable 绑定的是每一个对象;如果group 绑定的是一维数组,则 lable 绑定的是每一个对象中的具体值。<template> &l.原创 2021-02-20 19:17:21 · 6885 阅读 · 4 评论 -
vue + elementUI 表格相互切换时内容显示异常问题
这次做项目的时候遇到需要再同一个页面切换展示多个table的需求,然而再完成之后遇到一个问题:表格之间切换的时候会出现内容消失和无辜出现的现象,感觉对vue掌握的还不好,这里记录一下。先奉上解决办法:Vue+ElementUI项目中条件渲染切换表格时单元格内容显示异常的问题及解决方法在面试的时候,面试官...原创 2021-01-28 18:59:39 · 3133 阅读 · 4 评论 -
elementUI中el-table组件出现的表头和内容错位
首先,出现这种问题,一般是因为对浏览器进行了缩放操作,先将缩放重置,看是否正常。如果考虑到兼容问题,可以在app.vue中添加:.el-table th.gutter{ display: table-cell!important; }验证有效!...原创 2021-01-26 13:11:08 · 1197 阅读 · 0 评论 -
ElementUI BootStrap table 自定义序号
elementUI table组件自带序号这样写:<el-table-column align="center" type="index" width="50" label="序号" fixed="left"></el-table-...原创 2019-04-17 09:03:44 · 6585 阅读 · 0 评论 -
elementUI 时间选择器常用配置详解
elementUI提供了时间选择器等组件,使得我们可以快速的搭建项目,完成相关功能,说下时间选择器的常用配置项常用配置可以参考elementUI官网查看,包括选择日,周,月,年,多个日期,或者选择时间范围,不同的类型取决于时间组件配置项type的不同实际应用时需要许多特殊要求,这里大概分享下// 简单的时间选择器应用<el-date-picker v-model="...原创 2019-04-18 17:29:07 · 3401 阅读 · 0 评论 -
elementUI table组件封装(vue)
前段时间公司做了一个新项目,后台管理这种,大部分都是表格,UI框架用的是element,所以我刚好把表格组件封装了一下,elementUI表格组件常用的功能就是单选/多选框勾选,数据展示,行内按钮操作等,这块我也是基于本当前项目的需求大概封装的,比elementUI多的就是一个动态显示隐藏列的功能,这里记录一下<template> <div class="table...原创 2019-07-24 22:32:41 · 14319 阅读 · 2 评论 -
vue + elementUI 表格多选框选中 回显
项目开发使用的elemnetUI的table组件,牵扯到一个多选框的回显机制,这里记录一下。那么想要实现table的多选框回显,前提得有多选框,而实现回显也主要有依赖多选框自带的几个事件,当表格存在多选框时这几个事件便可以生效:<el-table ref="multipleTable" :data="carData" :empty-t...原创 2019-07-24 19:22:51 · 17273 阅读 · 1 评论 -
vue + element table 增加行,删除行
项目中对表格内容进行编辑的时候会需要创建一行,或者删除一行,其实原理就是向表格数据中添加一个新对象,或者删除一个对应的对象,因为渲染表格数据来源一个数组,所以其实就是对数组的操作。就像上图,可以创建一行,或者选择删除当前行,HTML代码如下:<el-dialog :title="DialogTextMap[DialogStatus]" :visible....原创 2019-07-24 18:03:30 · 7685 阅读 · 4 评论 -
elementUI 日 周 月 季 年 时间选择控件封装
项目需求,时间选择需要满足按日,按周,按月,按季,按年进行选择,然后组件封装是基于elementUI的,实现效果如图:日周月季年都有默认选择时间,项目需求,不能选择当前时间,所以按日选择,默认时间为昨天,按周选择默认时间为上周,以此类推。因为elementUI没有季度选择控件,所以这块也是在网上找的大神封装的,借用一下,表示感谢!季度控件,我在大神的基础上添加了时间禁用选项,包括当前及未来...原创 2019-08-17 16:49:26 · 15172 阅读 · 19 评论 -
elementUI form表单验证规则使用详解
elementUi提供了form表单自带有表单验证规则,这里简单介绍下比较简单的表单验证可以直接使用form自带的,ele定义的验证规则为rules数组,在使用elementU表单验证时可以向其传入约定的验证规则数组,并将 Form-Item 的prop属性设置为需校验的字段名即可<el-form :model="ruleForm" :rules="rules" ref="rule...原创 2019-04-12 19:35:05 · 4043 阅读 · 0 评论 -
ElementUI图片上传 回显
html内容<!-- 图片上传 --> <el-row> <el-col :span="24"> <el-form-item label="LOGO" prop="logoImg"> <el-upload class="up...原创 2019-03-18 17:31:59 · 19306 阅读 · 8 评论