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

r囧r小猫 2021-11-08 23:26 338阅读 0赞

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库进行开发总体给我的感受还是可以的，灵活性方面还行需完善，作为中后台完全是可以满足要求。