个人碰到的前端问题总结及解决办法3

个人碰到的前端问题总结及解决方法3

1、element ui 动态添加表单并添加校验?

关键点：key值不要相同、for循环即可

参考链接：https://blog.csdn.net/weixin_45527702/article/details/111386271

2、slice()和splice()区别

• slice(start,end)：方法可从已有数组中返回选定的元素，返回一个新数组，包含从start到end（不包含该元素）的数组元素
• splice()：该方法向或者从数组中添加或者删除项目，返回被删除的项目。（该方法会改变原数组）

参考链接：https://blog.csdn.net/xiaoqingpang/article/details/79108005

3、css怎么让div垂直居中？

方法一：
固定高宽div垂直居中（使用绝对定位和负外边距）
position: absolute;
left: 50%;
top: 50%;
width:200px;
height:100px;
margin-left:-100px;
margin-top:-50px;

方法二：
//利用CSS3的transform来实现文字垂直居中
谷歌
-webkit-transform: translateX(-50%) translateY(-50%);
火狐
-moz-transform: translateX(-50%) translateY(-50%);
ie
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
方法三：
//vertical-align属性让文字居中
vertical-align: middle;display: table-cell;

方法四：
//利用行高（line-height）让文字垂直居中
line-height和容器高度height相同

方法五：
利用内边距（padding）让文字垂直居中

方法六：
//利用flex布局实现文字垂直居中
display: flex;    
align-items: center;  /*实现垂直居中*/   
justify-content: center; /*实现水平居中*/

参考链接：https://www.php.cn/css-tutorial-411747.html

4、解决table设置了table-layout:fixed后单,元格宽度设置无效的方法

**原因：**table-layout: fixed 的表格，各列宽度由第一行决定，后面指定的宽度会被忽略。
你第一行合并了，所以各列宽度均分了。

解决方法：
在tbody前加
<col style="width: 60%" /> 
<col style="width: 20%" /> 
<col style="width: 20%" />  

参考链接：https://blog.csdn.net/xie_xiansheng/article/details/73249997

5、element 同时验证多个表单

解决方法：
let valids = []//创建一个空数据，用来存每个valid是true/false,
let formRefs = ['test0Form', 'test1Form', 'test2Form'] //用来存多个表单的ref值
formRefs.forEach((item, index) => {
    this.$refs[item].validate((valid) => {
      valids.push(valid)
    })
})
//查看是否都是true
let validFlag = valids.every((item, index) => {
    return item
})

6、elementui el-form组件resetFields方案无法重置部分字段值的问题

el-form无法重置表单项的原因有以下四点：

• el-form-item的prop属性缺失或属性值 不等于 字段名称
• 表单项本身就有默认值
• 表单数据绑定时未使用$nextTick函数（resetFields 重置到挂载前的数据）
• 未显示的表单项无法重置

参考链接：https://blog.csdn.net/weixin_40119256/article/details/101289356

7、this.$ref.refName 不成功？

原因： 页面要渲染好了才能调用，如果有v-if或v-for 可以用$nextTick 或者加个定时器再执行

8、vue子组件调用父组件的方法？

方法：this.$parent、ref、props($emit)

参考链接https://www.cnblogs.com/wufenfen/p/15900440.html

9、element 一个div里文字居中，右边右下角有个按钮？

<div style="display: flex;justify-content: space-between">
  <div style="width: 165px"></div><!--用来布局用-->
  <h2>{{表题}}</h2>
  <div  style="display: flex;align-items: flex-end;">
    <div class="operateDiv" @click="" style="margin-right: 15px;width: 66px">
      <i class="el-icon-view"></i>
      预览
    </div>
    <div  class="operateDiv" @click="" style="width: 86px">
      <img src="../../assets/img/statement/jobExport.png" alt="">
      页面导出
    </div>
  </div>
</div>
    
.operateDiv{
    text-align: center;
    line-height: 30px;
    height: 30px;
    border: 1px solid #e8e8ea;
    font-size: 12px;
    cursor: pointer;
    background: #fff;
    padding: 0 10px;
    img{
      width: 12px;
    }
    i {
      width: 12px;
      //color: #1a73e8;
    }

10、vue 删除对象的元素？

方法：

• this.$delete 直接删除了数组 改变了数组的键值
• delete 只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变

参考链接：https://blog.csdn.net/weixin_41849462/article/details/87912654

11、前端部署发布浏览器缓存问题？

解决方法：（方法四尝试中）
方法一：每次修改package.json版本号
方法二：修改打包文件名
方法三：在入口文件index.html添加

<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="expires" content="0">

方法四：nginx 配置，让index.html不缓存

location = /index.html {
add_header Cache-Control "no-cache, no-store";
}

参考链接：https://blog.csdn.net/duanhy_love/article/details/121653805

12、前端截取页面为pdf？

参考链接：
html2canvas 使用
https://www.jianshu.com/p/6af0a5ab5df7
jspdf用法
https://www.cnblogs.com/ranyonsue/p/14276303.html
页面截图导出为PDF，以及PDF强行截断分页问题的处理
https://blog.csdn.net/qq_41883423/article/details/120218479
https://blog.csdn.net/teacher_du/article/details/95942594

13、将多个jspdf保存的pdf文件压缩成一个zip文件？

参考链接：JavaScript base64位文件转Blob类型，FormData上传二进制文件
https://blog.csdn.net/weixin_41156757/article/details/108828671
前端批量获取文件并打包压缩解决方案
https://blog.csdn.net/qq_42002487/article/details/117946926

14、JQuery 基本方法报错：… is not a function的问题？

原因： 当$('.className') 得到了不止一个时，我想调用其中的第二个就会 $('.className')[2] 而此时一个JQuery对象被我变成了一个JS 对象，所在调用jquery方法的时候就报错，not a function
解决方法：
一、给你想要获取的元素加唯一的ID 或className
二、使用.eq()
.eq(n) 就是选第几个。
$(‘.className’).eq(2).prev();

参考链接：https://blog.csdn.net/zcy_csdn123/article/details/77884718

15、vue路由缓存问题？

经尝试动态清除缓存，第一个方法this.$vnode.parent有时为undefined,就会导致有bug，暂时未发现原因所在，第二种方法尝试失败，原因找到了，但时间花费较高，就未继续实现了，所以目前动态清除缓存的方法未实现，这里放着留着以后有需要来参考

参考链接：vue 的 keep-alive include 属性不生效问题
https://blog.csdn.net/Jeason_KK/article/details/123663766
vue如何动态清空路由缓存，结合keep-alive标签、el-tag标签
https://blog.csdn.net/BluerCat/article/details/107919257 —1
https://blog.csdn.net/weixin_44852765/article/details/115319833 —2

最终实现效果： tab页切换缓存页面、菜单栏点击刷新页面
解决方法：

组件上加 :key=‘$route.fullPath+$route.params.publicKey’

publicKey:(new Date()).getTime()

16、vue keep-alive 组件切换echarts不显示如何解决？

**解决方法：**把数据加载放到 activated 函数中，并采用v-if，离开页面deactivated删除组件，activated加载组件

参考链接：https://www.cnblogs.com/LcxSummer/p/15687069.html

17、vue禁止浏览器前进和后退

解决方法：

自己回来再看，发现方法一我自己也不知道怎么实现了，但我记得我当时是用next方法实现过的，推荐使用方法二，亲测有效。
方法1：
可以路由跳转前 使用next（）跳到当前页

方法2：分两部分
main.js中，增加popstate监听
// 禁止浏览器前进后退 另一部分在router的index.js中
window.addEventListener('popstate', function() {
    history.pushState(null, null, document.URL)
})

2.router的index.js中：
// 禁止浏览器 前进和后退，另一部分在main.js中
const router = new VueRouter({
  mode: 'history',
  routes,
  scrollBehavior: () => {
   history.pushState(null, null, document.URL)
  }
})

参考链接：https://blog.csdn.net/qq_41793354/article/details/120197376

18、setInterval()与setTimeout()计时器的区别？

• setInterval 每隔一段时间执行一次

如何停掉setInterval
var sh; 
sh=setInterval(function(),1000); 
clearInterval(sh);

实现每隔一段时间执行请求一次接口
注意：单纯的使用setInterval会导致页面卡死！
由于setInterval不会清除定时器队列，每重复执行1次都会导致定时器叠加，最终卡死网页。 
但是setTimeout是自带清除定时器的，因此
正确解决方法如下：
setInterval(() => {
  setTimeout(fun, 0)
}, 30)

• setTimeout 隔一段时间执行一次并且只有一次

参考链接：https://blog.csdn.net/qq_38946996/article/details/120779202

其他

1.transform:scale(1,1); 缩放div

border-collapse 属性设置表格的边框是否被合并为一个单一的边框

@media only screen and (max-width: 600px)
@media 规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。

text-decoration:underline; 简单下划线，无法添加特殊下划线 特征的下划线可以设置border-bottom样式来解决

writing-mode 文字排列顺序

https://www.runoob.com/cssref/css-pr-writing-mode.html

2、Missing required prop: “value” 报错的解决办法

https://blog.csdn.net/Yukinoshita_kino/article/details/107023315

3、div背景色设置透明度

https://blog.csdn.net/happydecai/article/details/81216419

4、elementui 进入页面自动校验 是因为校验规则是change然后赋值了null
5、div设置高度不生效 记录一下

https://blog.csdn.net/qfxl0724/article/details/121652325
https://www.jianshu.com/p/3e813174b99b

6、修改自定义指令v-loading的加载样式

v-loading="tableLoading"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255, 255, 255, .1)"

7、当父元素设置flex-direction：column；子元素默认width充满父元素
align-self: baseline;

https://blog.csdn.net/qq_43875051/article/details/105533915

8、vue 跳转同一路由,页面不刷新解决方案集锦

https://juejin.cn/post/6844904197326897159

9、Failed to execute ‘atob‘ on “window 将base64转为blob文件

https://blog.csdn.net/weixin_44819874/article/details/114682345

10、border-collapse:separate; 表格边框模型，合并还是分离
border-spacing:0px 10px; 表格间距 和padding类似
11、a标签中href=""的几种用法

https://blog.csdn.net/u010297791/article/details/52784879

12、前端表格导出为excel方法（纯前端导出和前端接收后端blob文件流导出）

https://blog.csdn.net/liaokaiguo/article/details/105483023