草庐IT

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

element-ui ,el-upload 文件上传必选项校验

虽然是一个比较小的问题,但是总结一下,当时用的时候网上查了很多,但是没什么卵用,实现不了,谨以此篇记录自己的代码将文件拖到此处,或点击上传只允许上传Excel格式文件取消确定import{baseURL}from'@/config'exportdefault{name:'ImportTeacher',data(){constvalidateLogo=(rule,value,callback)=>{if(this.form.file.length==0){callback(newError('请先上传文件'))}else{callback()}}return{form:{file:[],},ru

el-upload实现自定义上传http-request

在使用element的上传组件的时候,我这里用的是上传图片,如图1所示 正常上传是没有问题的,但如果我上传了第一张之后,然后去上传第二张,依次这样去替换自己想要得,虽然最后一张会把上传上传得给覆盖,但是还是会存在一些问题 发现得问题有2个:1.替换多少次,上传接口就要请求多少次,显得比较多余,浪费性能   2.就是如果你上传的第三张图片比较大的话,那么可能还没有等到第三张图片上传成功,保存接口就已经调用完了,结果提交的是第二张图,不是最新的第三张(如果你的逻辑是上传图片接口调用完成之后马上调用提交接口的话),如图3 解决方式:使用http-request自定义上传1.不管替换多少次,都只会取最

【vue】el-table实现动态添加行和列

实现思路:最近遇到一个动态增加行和列的需求,本来拿到需求的时候想用el-table中自带的方法去实现的,但是经过尝试发现不能满足想要实现的需求。没办法只能在el-table的基础上自己写原生。大概思路如下:1.首先把table中需要动态增加的行和列分开,分别定义一个数组dataList存放新增行数据,定义数组columnList存放新增列数据。2.其次在指定列的数据前面加新增按钮,点击新增按钮的时候请求接口拿到数据。3.然后把拿到的数据处理,把表格内容的数据push到dataList中,把表头内容数据push到columnList中。注意如果接口没有返回表头数据,则需要自己根据具体需求创造对应

Element-ui关于el-icon无法正常显示的问题(已解决)

在使用element-ui组件库的时候,使用自带的图标不显示,查了好多篇博客,都说是element-ui的版本老了,在package.json中修改版本重新安装就行,但是我的情况不是这样。最后解决看了这篇博客:https://blog.csdn.net/weixin_44835957/article/details/115009973要在main.js文件中引入图标的样式文件:

Element-ui中el-tabs的下划线样式微调

1.页面加载周期结束之后调用方法        mounted:function(){this.handleClick()},2.写这个方法handleClick(){this.resetActivePosition(this.$refs.tabs.$el)},resetActivePosition($el){//tabs的样式修改this.$nextTick(()=>{constactiveEl=$el.querySelector('.el-tabs__item.is-active');constlineEl=$el.querySelector('.el-tabs__active-bar')