element常见错误

最新推荐文章于 2023-08-25 20:24:32 发布

原生JS永远滴神

最新推荐文章于 2023-08-25 20:24:32 发布

阅读量1.4k

点赞数

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/timeares/article/details/121479640

版权

表单校验

在设置表单校验的时候，el-form-item上的prop属性的名称要和其内容的v-model绑定的属性名一样
表单验证出现错误原因：

dialog对话框覆盖弹框消息解决方式

在这里插入图片描述
注意：写在scoped中是不生效的

nav-menu组件

组件的index发生切换的时候对应的下一级菜单会自动收回去
原因：el-menu身上有一个默认展开的属性为:default-openeds 将值直接写在这个上面会引起这个问题
解决方式：以属性的方式赋值，
在这里插入图片描述

tree树形组件

存在问题：在内容超出最外层div设置横向滚动条的问题
解决方式

.el-tree {
	background: none !important;
       box-sizing: content-box;
       overflow: auto;
       ::v-deep {
         .el-tree-node {
             /*设置横向滚动条*/
             min-width: 100% !important;
             display: block !important;
             float: left;
       }
   }
}

vue中引入echarts

// echarts@5.0版本之前vue引入方式可以如下
import echarts from 'echarts'
// echarts@5.0版本以上 引入方式必须为如下
import * as echarts from 'echarts'

图表问题

问题：在图表被缩小后，x轴隔一项的文字会被去掉，如果不想让他去掉设置xAxis.axisLabel.interval: 0

vue项目打包之后页面尺寸的问题

问题：项目打包之后，页面的元素尺寸以及字体大小被放大
解决方式：在这里插入图片描述
主要思路就是：在浏览器解析之前，先让他计算rem和px之间的转换
px转换rem代码在app.vue中

// // 设置根节点的font-size值来确定rem的与px转换比
html.style.cssText = `font-size: ${document.body.offsetWidth / 1920}px;`
setTimeout(() => {
  console.log('在app.vue中刷新rem的比例值')
  html.style.cssText = `font-size: ${document.body.offsetWidth / 1920}px;`
}, 100)
window.onresize = function() {
  // 获取窗口宽度变化动态设置根节点的font-size值来确定rem的与px转换比
  html.style.cssText = `font-size: ${document.body.offsetWidth / 1920}px;`
}

父子组之间间传值问题

问题：当父组件渲染的比子组件迟子组件获取的值为null时
解决：给定义的组件元素上添加v-if判断，当元素获取到值之后再去渲染这个组件，定义一个开关，获取到值之后在打开开关解决

记录一下跨域处理的问题

devServer: {
      proxy: {
        '/api': { // 必须要写的请求地址里面含有的
          target: 'https://www.sogou.com/', // 请求的目标网站
          changeOrigin: true, // 是否进行跨域
          pathRewrite: {
            '^/api': '' // 重写当前url中头部含有字段，这里设置的是 以/api开头的全部替换为空
            // 写完之后在代码中请求的地址为：/api/websearch/phoneAddress.jsp?phoneNumber=13571955488
          }
        }
      }
    }

for of 和 for in

 const arr = ['a', 'b', 'c', 'd']
       for (const key in arr) {
       // 可遍历数组 可遍历对象
         console.log(key) // 0 1 2 3 
       }
       for (const key of arr) {
       // 只能遍历数组
         console.log(key) // a b c d 
       }

mongoose问题

批量存入数据的时候用findMany

const savePhone = async () => {
    const limitData = json.filter((item, index) => index >= 100000)
    await PhoneInfo.insertMany(limitData, (err, res) => {
        if (err) {
            console.log(err);
        }else {
            console.log('success');
        }
    })
}