
vue
记录vue开发中遇到的问题
前端-wjh
这个作者很懒,什么都没留下…
展开
-
el-upload 点击已上传文件跳转
upload组件上传完毕后点击不能查看已上传的文件,现在需要点击能跳转,废话不多说直接上方法。主要利用了插槽,并根据原有样式自己重写逻辑。注意一点,删除一条的方法需要自己去重写逻辑 <el-upload class="upload-demo" :action="action" :limit="limit" :on-exceed="handleExceed" :before-upload="beforeUploadEvent" :on-succes.原创 2021-12-22 20:41:36 · 1984 阅读 · 0 评论 -
虚拟DOM为什么不能用下标做索引
今天发现用索引做下标的时候,删除第二个元素会出现bug,顿时觉得很神奇,因为我代码里都是这样写的,从来没出现过bug。出现的原因:如果是index做下标的话之前的索引是[1,2,3];删除2后按道理讲应该变成[1,3];但是实际上变成的是[1,2,undefined];虚拟DOM diff的时候就会认为2没有变化,把3删除了。那么为什么我正常开发的项目中没有出现这个问题呢??因为正常情况下前端删除不是自己本地玩泥巴,而是通过ajax请求后端接口删除,再获取新的数据重新赋值,不是因为没有bu..原创 2021-05-24 22:18:51 · 223 阅读 · 0 评论 -
element-ui table 可编辑
element table组件没有直接可以使用可编辑的状态,需要自己手动编写一个。其实难度也不是很大。整体思路如下:表格字段有两种状态一种是可写,一种只读(输入框和文本切换也可以)根据cell-click事件定位到点击到的位置输入框全部变成只读状态,根据坐标设置唯一可写状态点击其他区域关闭可写状态cell-click事件无法获取点击的$index,需要做处理//html:row-class-name="tableRowClassName" //js tableRowClassNa原创 2020-10-28 14:38:44 · 2441 阅读 · 1 评论 -
Vue 2.6版本后的动态插槽
最近是搭建新的框架,vue的版本比较新,旧的语法便不想再使用了,其中在插槽是还是费了一点时间的。期望:根据字段批量生成插槽供主页自定义。问题:静态的可以显示出来,动态的显示不出来。最终的代码如下//子组件 tableColumnList是table组件内部的静态插槽名称<template v-slot:tableColumnList> <el-table-column v-for="(item, key) in tableObj.params"原创 2020-09-14 10:50:45 · 1960 阅读 · 0 评论 -
vue动态组件注入数据
之前也没有研究过动态组件,前两天有人问我动态组件的问题,给他解决了下顺便也记录下来。<template> <div class="home"> <div ref="currentView"></div> </div></template><script>import Vue from "vue";export default { name: "home", data() { ret原创 2020-09-11 16:21:26 · 864 阅读 · 1 评论 -
vue给对象赋值无效
今天刚上班遇到同事反馈,他的电脑上显示有问题,我自己看了一下自己的没有问题,看别人的也没有问题,就单单一台电脑有问题,使用的是chrome浏览器。然后我打开代码查看,只有一句话this.totalInfo = res;//res是后台返回的数据对象这是一个普通的赋值语句,怎么都显示不出数据,实在不行我就用了$set也是不行,最后没有办法将对象拆分成独立的string,还是不行(有点忘了)。突然发现自己不会写代码了,到底是啥情况。最后我看了下那个同事的浏览器版本,是最新的浏览器版本。这个问题可能是原创 2020-08-31 10:13:18 · 2783 阅读 · 0 评论 -
单页面应用多个账号登录问题
前提:前端项目中用了很多本地缓存,后端是通过SESSION会话识别账号,一个账号登录后在新窗口再登录其他账号会导致SESSION被覆盖,从而导致前面账号数据显示后面账号的,数据会串。解决方案:1.token,后端说他们没有用token不好弄给排除了2.前端自己处理,登录前先做登出操作,保证只存在一个SESSION会话;前端登录后会利用本地缓存特性自己鉴定SESSION属于哪个账号的,不是这个账号的退出到登录页面。具体操作:由于项目的特殊性,不能让多个账号同时操作,所以在用户登录的时候将用户id分别原创 2020-08-27 17:57:00 · 2693 阅读 · 0 评论 -
将系统的静态资源迁移到静态资源服务器
之前公司没有静态资源服务器,最近要求运维弄了一个,项目庞大了以后打包速度会慢,而且打包体积也大,通过将静态资源迁移到静态资源服务器以后打包速度变快了,包也变小了。其中涉及到的技术点也不多,主要是设置一下静态资源的路径,在vue项目根目录下建一个.env文件内容如下 NODE_ENV = 'BASE_URL' VUE_APP_TITLE = 系统管理平台 VUE_APP_URL = 'https://public.xxx.com/'index.html里面这样调用原创 2020-06-03 10:49:12 · 369 阅读 · 0 评论 -
vue service worker跳过等待安装
现在有这样一个问题,用户一直在管理系统上操作,项目发布版本后,得通知到用户我发版本了 你刷新一下,用户按了F5以后没有变化,或者强制刷新后再普通刷新显示有问题,这是因为service worker在本地有两个版本,但是讲道理项目发布以后在本地只能存在一个版本,于是就要用到插队功能了,后面的版本跳过等待替换前面的版本,具体代码如下1.在vue.config.js或者package.json里面添加...原创 2020-04-23 12:45:05 · 569 阅读 · 0 评论 -
vue项目打包上线优化
服务器环境 阿里云1G1核最低配项目打包后在未开启gzip的情况下是86个情求传输 2.8M开启gzip的情况下传输大小明显减少 速度快了很多然后分析一下静态资源的大小,排序后如下发现能优化的点有echarts按需引入,ele现在按需引入已经来不及了,banner压缩一下可以几十K,发现请求少了,文件大小也小了,但是耗时反而长了,原因是之前echart是异步加载的,刚才放到mai...原创 2020-04-21 12:02:20 · 457 阅读 · 0 评论 -
Delete `,` 怎么解决(vue eslint与prettier冲突)
最近又来了一个急项目,之前的项目基础上改版,开始用的是webStrome,最近半年换了vsCode,导致老项目在Vscode下报这个错,由于项目已经很庞大,编译+提示要费时近10秒,百度了一下eslint,发现解决不了这个问题,项目实在是太赶,这个就先放着。使用formate document的时候会默认带上逗号,执行yarn lint --fix会删除逗号,我的习惯是写一段代码后会格式化一下...原创 2020-04-20 10:34:08 · 10755 阅读 · 0 评论