vue
hjt_未来可期
这个作者很懒,什么都没留下…
展开
-
el-upload解决无法二次上传问题
el-upload无法二次上传、二次上传失败原创 2023-01-16 10:28:53 · 4853 阅读 · 0 评论 -
vue中el-input回车事件刷新页面
需求在页面中,输入框中输入内容以后,回车查询下面的数据方案使用input的回车事件 => @keyup.enter.native="”问题页面中点击回车以后,会刷新页面,并且路由中加了一个?解决方案查证后得知,form表单中,如果只有一个input框的话,回车的时候默认提交了表单,导致刷新了页面方案1 添加一个其他的input,但是不显示出来vue的话不能使用v-if修饰,v-if还是会出问题,必须使用v-show<el-form ref="searchFom"原创 2021-12-31 16:43:58 · 1734 阅读 · 0 评论 -
vue-router之动态路由
动态路由原创 2021-09-17 00:11:41 · 404 阅读 · 0 评论 -
vue中data之间数据自调用undefined的问题
需求:多个div,根据各自的num计算各自的百分比问题:在data中,自己调用自己的数据生成百分比浏览器报错data(){ return{ {num:100}, {num:0,percent:this.getPercent(this.totalData[1].num,this.totalData[0].num), }}这样的话,浏览器中报错解析:我认为,虽然在vue中,this是指向VueComponent的,但是data中的属性调用另一属性的时候,data中的数据还没原创 2021-08-27 15:25:12 · 1712 阅读 · 0 评论 -
父组件第一次渲染子组件不会触发子组件的watch
需求: 点击上面表格的预览,展示下面的表格以及手机预览样式实现方式: 在父组件点击预览后,下面根据父组件传过来的值展示对应的表格行数以及手机样式问题: 在父组件点击预览以后,子组件表格渲染出来,但是手机样式没有改变,就像下图一样,只有点击其他行的预览按钮,才能正常显示点击‘三格’行的效果:再次点击‘三格’行依旧没有效果点击‘六宫格’行的效果:此时发现想要的效果已经出来了,最终发现问题原因:‘子组件在created中已经接收了父组件传过来的值,但是没用走watch,导致无法显示手机预览样式’原创 2021-08-19 17:50:23 · 487 阅读 · 0 评论 -
vue中vuex的使用
1、vuexvuex是vue.js的状态管理模式,这为vue的组件间通信带来了极大的便利,主要应用场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车……2、主要内容state,驱动应用的数据源;view,以声明方式将 state 映射到视图;actions,响应在 view 上的用户输入导致的状态变化。下面是官方给出的单项数据流的概念图3、 vuex的工作流程下面让我们梳理一下以上流程Devtools如果不知道怎么使用可以去看我这条博客如何在浏览器中使用Devtool原创 2021-08-10 15:48:05 · 114 阅读 · 0 评论 -
vue路由传参
vue路由传参的几种方式1.不使用vue-route组件的1.1 使用sessionstorage/localstorage传参localstorage/sessionStorage.setItem(‘a’, “value”) //存值localstorage/sessionStorage.getItem(‘a’) //取值1.2使用vuex传参这里比较繁琐,会在下一篇vuex详解中看到1.3 总结这三种传参方式都比较繁琐,用起来有些小题大做,一般不会用到。2. 使用vue原创 2021-05-20 17:45:48 · 132 阅读 · 0 评论 -
在浏览器中使用vue-tools
下面是下载地址,直接下载然后拖入浏览器的拓展程序即可https://chrome.pictureknow.com/extension?id=d50143a5f53d406dbe992277bfc90521,下载地址,下载crx文件,并拖拽至浏览器打开浏览器设置–> 右上角–>设置 -->扩展程序直接将crx文件拖入即可最后这样就算拖入成功,然后打开自己的vue项目,按下F12,如过出现该选项(如下图),安装成功...转载 2021-05-14 14:28:48 · 311 阅读 · 0 评论 -
vue修改项目title
直接在vue.config.js文件(如果没有新建一个,修改完需要重启项目,与src平级)中插入以下代码即可完美解决chainWebpack: config => { config.plugin('html').tap(args => { args[0].title = '喵喵电影' return args });}...原创 2021-03-29 16:46:48 · 262 阅读 · 0 评论 -
vue控制台报错Duplicate keys detected: ‘1217‘. This may cause an update error.
今天运行项目的时候,F12突然报错Duplicate keys detected: ‘1217’. This may cause an update error.虽然不影响正常使用,但是还是要解决的,所以就查了一些资料,最终得知,是因为v-for循环中绑定的key值重复了,于是查看代码中,我的代码里有好几个v-for循环<div> <h2>热门城市</h2> <ul> <li v-for="i in hotList" :key="原创 2021-03-14 17:14:57 · 115 阅读 · 0 评论 -
使用axios防止触发多次重复请求(防抖)
需求最近在做移动端电影项目的搜索组件的时候,发现每次输入都会调接口访问,要实现的是“不是每次输入都调用接口,而是取最后一次输入的值”有两种方法实现,在watch中首先使用clearTimeout(),然后在后面开启一个新的定时器setTimeout(),将axios请求写到后面可以实现但是不推荐使用axios自带的下面直接看代码<template> <input type="text" v-model="message"> </template>原创 2021-03-08 15:26:13 · 1242 阅读 · 0 评论 -
vue项目运行报错Proxy error: Could not proxy request “***UIRL” from “***” to “****”
今天在测试反向代理的时候,访问本地接口的时候报错Proxy error: Could not proxy request /miaomiao/cityList from localhost:8080 to http://10.12.0.111:3001.See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).首先看编译器报错出现这种问题大致两种原因原创 2021-03-01 10:51:26 · 72571 阅读 · 9 评论 -
element 控制表格列显隐
最近接了个新需求,需要用户自己筛选某一列显示与否其实大致思路就是使用CheckBox绑定的值控制表格列绑定的v-if的值,通过vue的watch来监控CheckBox绑定值的变化来控制下面看代码//首先是引入element组件中的表格<el-table :data="tableData" stripe border style="width: 98%" ref="tableDataRef"> <el-table-column type="selection" width=".原创 2021-02-01 15:14:47 · 1027 阅读 · 2 评论 -
element组件table表格表头添加下拉框等其他组件
最近项目里遇到一个需求,需要在表头添加下拉框组件,来控制列显隐这次先解决添加下拉框问题,下次解决下拉框控制显隐首先看官方文件里面给出的添加组件的slot一些简单的需求 直接用这个方法就可以了下面直接上代码<el-table-column label="工单ID" type="index" width="80" fixed></el-table-column><el-table-column prop="tenantName" label="租户名称" mi原创 2021-01-30 15:42:50 · 2098 阅读 · 0 评论 -
localStorage存取值
存值 localStorage.setItem('key', value)取值 localStorage.getItem('key')sessionStorage与localStorage相同最后查看是否存进缓存里面了可以在浏览器F12查看Application原创 2021-01-13 18:00:58 · 540 阅读 · 0 评论 -
element-ui 关联列表与分页器
element-ui 关联列表与分页器在element-ui-表格和element-ui-分页中都没有提到如何将二者关联,下面就将二者关联起来实现列表分页效果先看效果(我这是八条数据,一页五条,分两页的效果)下面看一下代码首先是表格的代码<template> <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" stripe style="width: 100%"&原创 2021-01-05 14:38:03 · 699 阅读 · 2 评论 -
element-ui表格表头插入icon
element-ui中表格的表头增加icon并设置点击事件首先看element-ui中给出的渲染label的函数render-headerelement组件库话不多说,直接上代码<el-table-column prop="id" label="申请编号":render-header="renderHeader"></el-table-column><script> method: { renderHeader(h, { column, $ind原创 2020-12-30 10:34:03 · 3927 阅读 · 3 评论