vue+iview项目中遇到的坑及解决方案

vue:
1.父组件应用子件,加载执行的方法会加载父组件的时候一并加载。
处理方式是,在调用子件方法的时候再调用或者监听某个属性改变的时候再触发方法。
2.父组件给子件传递对象值在子件修改的时候会链式改变父子件中的值。
处理方式是,1.可以将对象转成字符传再转成对象进行修改。2.可以使用深拷贝Object.assign()方法拷

贝个新的对象。
3.怎样在全局使用vue实例。
可以在main.js中把vue实例导出在别的地方使用,其他实例也可以按照这种方法使用。
4.路由守卫。
router.beforeEach方法。
5.vue拦截器,统一拦截接口统一处理。
Vue.http.interceptors.push方法,axios也有对应的拦截方法(ajax交互库建议使用axios)。
6.操作异步的地方加loading还是再保险的方式。
iview:
1.表格列设置宽度和自适应不换行。
minwidth,width,不换行省略号隐藏,超出tooltips处理。
2.表单校验,异步请求接口校验提交还好校验,而且没有等接口返回再进行提交。
可以在validator加校验判断。
3.表单动态校验方法。
可以参照案例使用
v-for="(item, index) in formDynamic.items"
                v-if="item.status"
                :key="index"
                :label="'Item ' + item.index"
                :prop="'items.' + index + '.value'"
                :rules="{required: true, message: 'Item ' + item.index +' can not be 

empty', trigger: 'blur'}">

:rules中可以使用pattern正则进行校验也可以使用validator进行校验。
4.validator方法使用data中的数据一般使用let _self = this获取一下,不直接使用this。
echarts:
1.对于长时间轴的数据展示不完。
处理方式,可以使用echarts的放大缩小dataZoom。
2.两个图表共用一个dom结构。
处理方式,对应的两个图表数据的地方使用gridIndex指定是那个数据的数据。

总结:
第一次使用iview库进行开发总体给我的感受还是可以的,灵活性方面还行需完善,作为中后台完全是可以满足要求。

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值