草庐IT

element-ui el-date-picker日期选择器 value-format问题

通过原生js和moment.js分别获取moment().format('YYYY-MM-DDHH:mm:ss')格式的时间moment.js:文档|Moment.js中文网(momentjs.cn)

VUE element-ui之el-tree树形控件循环遍历渲染dom节点;子节点横向排列;控件添加指示线

步骤:定义模板(做循环遍历处理):template>divclass="container">el-cardv-for="(item,index)inrouteList":key="index"class="routeList-box">-->el-treeref="tree"class="el-tree"show-checkboxnode-key="id":indent="0":data="item.list":props="defaultProps":highlight-current="true":default-expand-all="true":render-content="ren

如何解决单个el-form中el-form-item文字左对齐

    在开发的过程中,遇到了一个关于页面排版的问题,如何将el-form中一个el-form-item的label左对齐,文档里提供了label-position 这个属性是控制整个表单的label的位置。    文档中提供了label-width,给单独的el-form-item设置label-width:auto;功能实现了,但是校验的提示却错位了,最后不得以修改了el-form中默认样式,来控制他label居左.group-item-vo{display:flex;justify-content:flex-start;padding-bottom:14px;span{margin-ri

element ui实现el-upload用户头像上传(单图上传)

 这是我们要实现的效果elementui上的代码和效果如下:.avatar-uploader.el-upload{border:1pxdashed#d9d9d9;border-radius:6px;cursor:pointer;position:relative;overflow:hidden;}.avatar-uploader.el-upload:hover{border-color:#409EFF;}.avatar-uploader-icon{font-size:28px;color:#8c939d;width:178px;height:178px;line-height:178px;te

如何让element-ui的el-row内容居中(水平垂直)

1.水平垂直居中如图,则主要代码是:type="flex"justify="center"align="middle"2.水平居中如图,则主要代码是:type="flex"justify="center"3.垂直居中如图,则主要代码是:type="flex"align="middle"

vue使用element-ui的el-image的src问题

起初:今天在学习vue的时候,遇到了一个问题,vue学的马马虎虎,语法也不扎实。遇到的问题在这里记录下来。问题:是使用el-image的src链接问题。文件结构是这样的: 按照以往学习html的思想,在使用el-image标签的时候src我写成了src="../image/Anonymous.png"。乍一看没什么问题,但是就是显示加载失败。  解决: 网上查了很多资料,很多都是用vue动态加载请求获取图片的方法,我还用不到这么复杂的。后来发现是语法的问题,改成:src="require('@/image/Anonymous.png')">就可以了。如果有用记得点赞收藏哦!顺手也点个关注叭!本

element-ui的el-form表单一行两个显示效果

效果图:         代码:编辑因为代码重复所以这些只写了一份 .form{display:flex;flex-wrap:wrap;justify-content:space-between;}.el-form--inline.el-form-item{flex:1040%;align-items:center;}//第一行按钮独占一行.form-item-full{flex:100%!important;}css设置这些就ok了 

Element UI组件中el-checkbox组件样式的修改

问题描述:ElementUI组件仅提供了按钮形式的Checkbox激活时的文本颜色修改的属性(text-color)以及激活时的填充色和边框色的修改属性(fill),非按钮形式的如何修改这些样式呢?解决方案:提示:直接修改CSS属性,相关代码如下:.demo-checkboxel-checkbox(v-model="checked"text-color="#000")相关协议或者条款exportdefault{data(){return{checked:true};}};.demo-checkbox{.el-checkbox__input.is-checked+.el-checkbox__la

el-upload 只能上传一个文件(完整适用方法),包括:新文件替换原文件方法。

html:将文件拖到此处,或点击上传仅允许导入pdf格式文件,单次只可上传1个pdf文件js:import{getToken}from"@/utils/auth";data(){return{//导入参数upload:{//是否显示弹出层(导入)open:false,//弹出层标题(导入)title:"",//是否禁用上传isUploading:false,//是否更新已经存在的用户数据updateSupport:0,//设置上传的请求头部headers:{Authorization:"Bearer"+getToken()},//上传的地址url:process.env.VUE_APP_BAS

element-ui+vue中el-container铺满布局

第一步铺满全屏样式添加html,body,#app,.el-container{/*设置内部填充为0,几个布局元素之间没有间距*/padding:0px;/*外部间距也是如此设置*/margin:0px;/*统一设置高度为100%*/height:100%;}第二部头部内容铺满```javascript第三部宽度自适应高度铺满html,body,#app,.el-container{/*设置内部填充为0,几个布局元素之间没有间距*/padding:0px;/*外部间距也是如此设置*/margin:0px;/*统一设置高度为100%*/height:100vh;}.el-aside{height