![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
濮家大少
我是一个粉刷匠(前端开发)
展开
-
vue3 使用addRoute动态添加路由,页面刷新就白屏解决办法
vue3 使用addRoute动态添加路由,页面刷新就白屏解决办法原创 2023-12-22 17:44:22 · 1357 阅读 · 0 评论 -
使用antd的上传组件做上传附件数据校验踩坑
使用antd的上传组件做上传附件数据校验踩坑原创 2022-11-26 10:58:41 · 865 阅读 · 0 评论 -
antd上传组件remove删除自定义存储文件使用踩坑记录
antd上传组件点击文件列表中的删除图标,调用remove,删除自定义存储文件链接数组中的对应数据是告警原创 2022-11-16 18:45:12 · 2229 阅读 · 2 评论 -
ant Design的table组件结合h函数实现合并行
ant Design的table组件结合h函数实现合并行原创 2022-08-02 15:00:41 · 915 阅读 · 0 评论 -
结合async await循环调用接口
async queryNewFund() { let that = this let codeList = ['011891', '011892', '011893', '011894'] for (let i = 0; i < codeList.length; i++) { let obj = await that.getData(codeList[i]); if (obj) { // 此处是接口返回的数据,可以做汇总处理,例原创 2021-09-15 15:57:04 · 898 阅读 · 0 评论 -
vue实现上拉加载和下拉刷新
上拉加载这个上拉加载是我看了别人的文章,亲测好用后直接搬过来的。原文在这:https://blog.csdn.net/qq_34439125/article/details/85602508加载组件:<template> <div class="weui-pull-refresh" ref="scrollBox" :style="style" @touchstart="touchStart" @touchmove="touchMove"原创 2021-04-23 10:11:52 · 2203 阅读 · 3 评论 -
在el-select的change事件中传递自定义参数
这个方法在element-UI 组件的change事件中应该都适用@change="(val)=>checkChange(val, '自定义参数')"原创 2021-02-22 15:58:08 · 11187 阅读 · 0 评论 -
el-table-column使用v-if导致位置错乱
在使用tab切换时,使用的是同一个表格组件,切换状态时要重新请求数据,然后要根据不同的状态展示不同的列,使用v-if做判断,在切换时,发现本该隐藏的列没有隐藏,而且位置还发生错乱了!会错乱的写法:<el-table-column v-if="isTab1">受理日期</el-table-column><el-table-column v-if="isTab2">生效日期</el-table-column>解决方法:每一列都添加一个具有唯一值的 ke原创 2020-11-17 15:10:32 · 1624 阅读 · 0 评论 -
vue项目页面根据导航栏跳转到指定位置
需求:vue项目中,页面内容过多需要往下滚动很多才能见信息浏览完,但是操作按钮却在顶部,浏览修改完信息后要回到顶部后才能进行操作,操作不方便,因此要添加一个导航栏,通过菜单跳转到页面指定的位置,导航栏可以展开隐藏!代码实现:导航栏部分<dl class="menu"> <div class="menuContent"> <div v-if="ismMenuShow" class="menuButtons" @click="hideContent()">原创 2020-11-09 15:57:26 · 2579 阅读 · 1 评论 -
vue防止暴力点击
vue防止暴力点击问题:快速点击按钮时会频繁重复调用借口,为了防止这种情况,要对相应的按钮进行防暴力重复点击处理,最好是使用函数防抖或者函数截流来处理,但是现在已经要修改的按钮太多了,于是换一种方法,用指令的方式来达到相识的效果。1.创建preventReClick.js文件import Vue from 'vue'Vue.directive('preventReClick', { inserted (el, binding) { el.addEventListener('click',原创 2020-10-10 16:42:38 · 892 阅读 · 0 评论 -
vue中[__ob__: Observer]的数组无法遍历
今天开发遇到这样一个问题,记录一下踩坑记录 我请求回来的是一个数组,我要通过遍历这个数组将符合要求的数据重新push到一个新的空数组中,然后再遍历这个新数组进行操作,但是过程中发现新数组使用forEach遍历时没有进入循环,打印新数组后如下所示: 其实不是数组无法遍历,是我在请求方法外面直接调用了遍历新数组的方法,由于请求是异步的,还没接收到后台返回的数据,也就还没有添加到数组里,遍历时自然没有内容。 数组为空,但是点开又有数据是因为开始空数组没赋值,赋值之后,因为是地址引用,那个数组已经被修原创 2020-09-09 16:14:28 · 8169 阅读 · 3 评论 -
vue修改Element UI样式,样式穿透
在vue组件中,为了使样式私有化(模块化),不对全局造成污染,在style标签上添加scoped属性,以表示它只属于当下的模块。这样在打包的时候会生成一个独一无二hash值,这样父组件的样式就不会影响到子组件了。但是如果你要想修改子组件的样式,就只能修改公共的样式,这样的话其他使用这个组建的地方都会改变,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>,穿透scoped。有些Sass 之类的预处理器无法正确解析 >>原创 2020-08-10 12:57:48 · 12172 阅读 · 0 评论 -
在vue中使用layDate日期时间插件
项目中需要用到日期时间插件,但是项目要使用公司内部的镜像源且没有UI库,只能放弃使用elementUI,iview等一些组件库,最后想到使用layDate实现该功能参考:https://www.cnblogs.com/duanzhenzhen/p/10611028.htmlhttps://www.cnblogs.com/qq376324789/p/11224717.html使用过程:下载插件:https://www.layui.com/laydate/复制文件夹到项目中将laydate文件原创 2020-07-03 15:51:08 · 1168 阅读 · 0 评论 -
js手动下载文件
问题:下载文件一般可以使用a标签设置 download 属性来实现,但是遇到图片和.txt文件时是会直接打开,所以使用手动下载。downloadFile :function (fileUrl,fileName){ this.$axios.get(formUrl).then((res)=>{ let fileSuffix = fileUrl.split('.').pop();//文件名后缀。 let blob = new Blob([res.data], { type: `applicat原创 2020-06-29 16:33:47 · 254 阅读 · 0 评论 -
ElementUI 时间控件el-date-picker设置时间范围7天且不能超过当天
使用官方文档自带的pickerOptions 事件template部分:<el-form-item label="选择时间"> <el-date-picker v-model="bodyCount.date" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" for原创 2020-06-04 16:55:40 · 6072 阅读 · 3 评论 -
在el-tabs中使用echarts画图表时的宽高变成100px问题
问题最近做项目时遇到这样一个问题,使用el-tabs展示echarts图表时,只有在默认选中页里,echarts图标才能正常展示,其他页的echarts图表宽高都会变成100px。原因echarts绘制图表计算宽度的时候,由于第二个tab的属性display: none; 所以无法获取到clientWidth,而 parseInt(stl.width, 10)) 将width: 100%;转为100,所以计算出的图表宽度高度为100px。解决方法我原来是直接在el-tab中写的echarts绘图,原创 2020-05-15 18:50:30 · 1287 阅读 · 0 评论 -
el-upload自定义上传后回调上传成功和失败事件
template部分:<el-upload class="el_upload_above" action="" ref="upload" :limit="limitnum" list-type="picture-card" :http-request="uploadSectionFile" :auto-upload="true" :file-list="fi...原创 2020-05-06 14:33:02 · 14332 阅读 · 1 评论 -
element ui使用滚动条组件el-scrollbar(官方没有)解决对话框el-dialog的滚动条问题
今天写vue+element ui写项目时有个需求是要在对话框中进行操作,但是当对话框内容过多时却不会出现滚动条,通过修改样式后虽然出现滚动条,但是滚动条的样式不是很理想,通过查找发现了element ui官方没有的隐藏组件el-scrollbar(滚动条组件)<el-scrollbar style="height:300px;">//我在这里设置高度未300px ......&...原创 2020-03-12 18:16:24 · 9089 阅读 · 5 评论 -
将有父子关系的数组数据转换成树形结构
1问题使用vue开发项目时使用到了element ui组件的树形组件,需要的数据是有树形结构的数据,但是后台返回的数据是有父子关系的数组,需要对数组进行处理是数据能被树形控件识别原数据:sider:[ {label:"一级目录1",id:1,path:"",parentid:0}, {label:"一级目录2",id:2,path:"",parentid:0}, {l...原创 2019-09-09 17:47:18 · 1332 阅读 · 1 评论 -
vue2.0 实现导航守卫(路由守卫)
路由跳转前做一些验证,比如登录验证,是网站中的普遍需求。对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards)。导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧。贴上文档地址:https://router.vuejs.org/zh-cn/advanced...转载 2019-01-02 11:34:15 · 271 阅读 · 0 评论 -
vue-cli 脚手架 安装
一、 node安装1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v (检查一下 版本);2)如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , node 安装地址:http://nodejs.cn/download/注 :安装 vue-cli 脚手架目前需要node版本为 v4.0 以上;二、 vue-cli 全局安装命令行执行 : ...转载 2019-01-04 15:04:36 · 133 阅读 · 0 评论 -
iview在table中某一列添加图片
我们知道iview的table封装的太好,如果只是展示数据简直不要太简单,但是比如合并单元格就很麻烦,而我要做的是在table中添加图片建议大家先看一下这个:https://www.iviewui.com/components/table#column我们要用的是render函数,因为我用了很多表格,所以我把表头的加载封装了一下,大家也可以试用一下首先是从数据库中读出来的表头title和ke...转载 2019-10-16 09:34:16 · 1689 阅读 · 0 评论