工作中遇到的问题和一些经验总结
工作中遇到的问题和一些经验总结,主要是vue和elementUI以及一些常见的报错解决方案
目录
8.[Vue warn]: Duplicate keys detected: '0'. This may cause an update error. found in解决办法
19.左侧10个tab选项，点击时，右侧显示柱状图，右侧柱状图数量不等，大于等于1.让数据实时改变
1.样式：下拉菜单位置
问题：修改elementUI中的样式，没有生效。
改了半天都不行，最后发现是 ：：v-deep 和 .el-dropdown-menu的问题
/* 修改下拉菜单item项 */ --这样就可以 中间有空格就不行
::v-deep.el-dropdown-menu {
left: 53.5% !important;
}2.vue props修改数据问题
报错信息：
通过props传递给子组件的show，不能在子组件内部修改props中的show值
解决：
在子组件里面定义一个变量，接受传过来的值，这个操作在mounted或者create里面就可以了。
3.将时间转换为时间戳
timestampLogin = new Date('2019-08-08 16:51:07').getTime();//1565254267000
4.时间戳转换为天数
截止时间减去当前时间，算出距离截止的天数
let rangeDateNum = (time - new Date.getTime()) / (1000*3600*24);
5.获取当前时间时间戳的几种方式
获取当前时间戳
Calendar.getInstance().getTimeInMillis();
System.currentTimeMillis();
new Date().getTime();6.js大小写字符串转换
str.toUpperCase() 方法将字符串转大写并返回
var str = "Hello World Hello World";
var str2 = str.toUpperCase();
console.log(str2);//HELLO WORLD HELLO WORLDstr.toLowerCase()方法将字符串转小写并返回
var str='www.jb51.net/ABC';
document.write(str.toLowerCase());//将输出 www.jb51.net/abc7.vue 过滤器filter
filters:{
//处理函数
addPriceIcon(value){
console.log(value)//200
return '¥' + value
}
}8.[Vue warn]: Duplicate keys detected: '0'. This may cause an update error. found in解决办法
错误原因：
一个template中有两个一样的v-for, key属性冲突导致
解决：
在第二个v-for中， key属性设置一下即可：:key="index+1"
坑：知道是key的问题，改了下key的名字，不行，于是记录之
9.bug:渲染时报错未定义
Cannot read properties of undefined (reading 'cve_Published')解决：并非是数据格式问题，应该是异步问题。加上一行v-if判断就好了
10.git报错
ssh: connect to host gitee.com port 22: Connection reset by peer解决：换个网。。
11. 本地项目运行时跨域问题
最简单的办法 ，vscode下载live serve 右键open in liveserve
12.vue项目本地开发，同局域网同时不能访问我的项目
在package.json文件中script要运行的命令上，加上--host= 本机IP地址；同时关闭防火墙
"scripts": { "serve": "vue-cli-service serve --host=192.168.31.60", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },
13.获取对象长度
var obj = {'id':1,'name':'叶落森','sex':'女'};
var arr = Object.keys(obj);
console.log(arr); // ['id','name','sex']
console.log(arr.length); //314. 获取0到n之间的随机数
randFrom0ToN=Math.floor(Math.random()*Math.floor(n));
以上语句即可生成 0 到 n 的随机数（整数）15.用变量控制颜色
:style="{backgroundColor:`rgba(${getRandomColor().ran},${getRandomColor().ran2},${getRandomColor().ran3},1`}"16.父传子数据改变子不改变方法
在子组件监听父传过来的数据，然后重新赋值就可
17.前端请求超时
报错：
redis.exceptions.ConnectionError
redis.exceptions.ConnectionError: Error 10060 connecting 192.168.31.167:6379. 由于连接方在一段时间后没有正确答复或连接的主机没有反应，连接尝试失败。.由于后端缓存服务器掉了，后端问题。
18.解决右侧出现滚动条页面抖动的问题
问题：
页面初始内容没有超出浏览器可视区域，打开下拉菜单之类的，超出后就会出现滚动条，由于滚动条占宽度，所以在出现的瞬间，页面会有小幅度的移动（挤压）。
完美：
如果不考虑太多兼容，只用在谷歌或使用谷歌引擎的其他浏览器如360上面的话，用这个非常好，可以理解为把滚动条搞成绝对定位,不占位置漂浮于页面内容上，实际的效果比较好。
新属性overlay方法：
html {
overflow-y: overlay;
}可惜，兼容性不佳，在火狐等浏览器无效，要是有需求还有三种方法：
1.js去计算，2.把body设置为绝对定位，3利用vw和calc实
19.左侧10个tab选项，点击时，右侧显示柱状图，右侧柱状图数量不等，大于等于1.让数据实时改变
将柱状图封装为一个子组件，然后将v-for里面的item传过去，子组件监听item，重新赋值
20.修改elementUI表格表头的背景颜色
1、首先使用 elementUI中的header-cell-style 属性
<el-table
:data="paperList"
:header-cell-style="getRowClass"
>
2、然后在getRowClass方法中 改变css样式
getRowClass({ rowIndex, columnIndex }) {
if (rowIndex == 0) {
return "background:#f8f8f9;";
}
},
21.打包部署后发现页面问题
问题：
打包部署后发现页面只能显示一个屏幕，没有滚动条，导致页面只能部分显示
解决：
大概率是css问题，尤其是第三方css，可以试着全局查找overflow：hidden,重点是body或者是html里面的这个属性，给删除了，即可
前往低代码交流专区
更多推荐
5
0- 0
已为社区贡献9条内容
所有评论(0)