• 做vue项目中遇到的坑总结与学习


    1、出现跨域问题(已经进行跨域设置的情况下)

    这个问题找了半天。。。。最后的解决方式:查看后台支持的编码格式和前端axios发送过去的的编码格式是否一致。不一致就会出现跨域问题。至于为什么也不明白,可能是浏览器认为不一致的编码就是跨域也可能就是浏览器的bug吧。

    具体方式:可以安装一个叫qs的依赖,然后在请求前用qs.stringify()方法转一下再发送请求,就ok了。

    首先下载qs:npm install qs 

    然后引入import qs from 'qs'

    在请求接口中设置一下:

    代码: export function userLogin(params){
    return service({
    method:'post',
    url:'/a/login',
    data: qs.stringify(params), //主要是这一步很重要!
    }).then((res)=>{return res.data}).catch((err)=>{console.log(err)})
    }

    2、vue多个路由绑定到同一个组件上,造成created只执行一次,就是说页面加载成功一次后就不能再变化,所以不论怎么触发路由跳转页面都只显示第一次加载的数据。

    效果:点击左侧树节点实现右侧页面跳转

    经查阅资料,原因是:这个和vue的生命周期有关系,出现这种情况是因为页面在加载成功后他的大多数钩子函数(如mounted、computed...)就不会再次触发,所以导致页面感觉没有实现跳转。

    解决方法:针对这种情况,其实不需要进行页面切换,只需要页面中的数据发生变化就好。在页面中监听路由地址的变化,当地址变化的时候,就重新加载数据。

    具体代码:

    watch: {
    '$route.path': function (to, from) {
    this.initInfo();//调用相应方法
    }
    }

    3、el-tree控件,鼠标手移到树节点上,鼠标手和节点显示不对应。

    原因:样式设置有问题,通过f12调试发现,某条树节点的高度太高,以至于把其他的节点都覆盖住了,所以这个节点高度太高,跨度太大,所以鼠标手和节点位置会有偏差。

    解决:修改每个树节点的高度。

    4、el-tree控件,如何设置树节点选中背景颜色

    解决:加上highlight-current

    在样式中设置:

     5、element-ui组件使用el-table如何动态设置列表的宽度

    首先说一下自己遇到的问题吧:

    表头数据也是动态获取的,所以不好给每表头设置固定宽度,而且是使用v-for循环显示表头。这个时候的需求就是想把倒数第二列的宽度设置宽一些,其他列宽度窄些。

    具体的实现方法:

    在表格中添加宽度属性:width,在method中添加自定义列的宽度的方法。判断某个表头的字段是不是倒数第二个,然后设置宽度,如果不是再设置成其他宽度。这里我为了让表格宽度自适应不同浏览器,用了百分比设置宽度,但是效果不理想。

    所以考虑不用百分比但又要自适应,这里才有min-width,设置最小宽度的同时会动态分配宽度。

    这时候效果就比较理想,效果图如下:



    
    

     6、el-tree控制如何自定义图标样式?

    怎么将图标从图1改成图2,数据从后台获取的?

    解决:研究了一下开发文档有个icon-class可以自定义图标样式

    刚开始我理解错了,在icon-class前加了:当做动态属性处理了,其实这个就是一个class。

    这样直接使用即可。

    就可以得到想要的效果。class具体的值可以查看

     el内置的图标   https://element.eleme.cn/#/zh-CN/component/icon 

     7、element-ui组件中使用form表单,自定义验证规则时导致validate不能执行。

    解决:在自定义规则中

    一定要在自定义规则之后加上else{callback()}

    否则,callback不能进行回调。导致validate()无法执行。

    如果有多条验证规则,每条规则都要加上else{callback()}才可以!

  • 相关阅读:
    springboot框架
    java是什么
    Java文件读写
    Spring Cloud学习入门路线方案
    Spring Cloud学习路线
    Lucene——索引过程分析Index
    Lucene学习入门——核心类API
    爬虫技术框架——Heritrix
    Spring Cloud入门程序——注册服务提供者
    Spring Cloud入门程序
  • 原文地址:https://www.cnblogs.com/jennydtt/p/11127745.html
Copyright © 2020-2023  润新知