本人新手小白一枚~总结一下自己开发中遇到的一些小问题和解决办法。
-
最常见的就是this.$nextTick(()=>{})的使用。一般从后端接收的值还没有获取到,但就要使用,就会造成当前值空。此时需要一个延迟才能获取。
-
vue父子组件传递过程中,如果想要在父组件里为子组件添加点击事件,@click是不生效的,需要用到@click.native的原生事件。
-
js向vue中append一个div加上样式不生效。因为vue中scoped样式都含有’data-v-1893249‘,去掉scoped就可以。(f12可以看到data后面的那个数字都会变化)
-
组件复用性。不敢保证所有的产品能够一步到位,特别是持续使用过程的产品。如果面临突然增删改需求,那么没有模块化或者复用性高的组件必然让人头疼。所以,可以完成任务的前提下利用有限时间进行组件的封装,拆分,避免代码冗余,维护麻烦。
-
.element-ui组件的时间选择器clearble后值为null。做判断的时候要注意一点。
-
echarts用v-if控制显隐时,会发生不可重新渲染,原因为echarts高度丢失或数据显示但是dom还未渲染,所以echarts不会显示。通过this.$nextTick()实现。
-
element表格v-if切换列会出现乱序情况。给每一列都增加一个key值,或者用:key=“Math.random()”,或者data里定义表格列数据的内容。
-
如果页面使用了缓存后,会看到elemen-ui表格发生错位问题,可以用
activated() {
this.$nextTick(() => {
this.$refs.table.doLayout();
});
},
- .echarts的自适应问题。页面中多个echarts使用resize只会应用到其中一个,需要用到二级绑定,即监听事件
//(多个无效)
setTimeout(function (){
window.onresize = function () {
myChart.resize();
}
},100)
//换成下方代码
=======》
setTimeout(function () {
window.addEventListener("resize", () => {
myChart.resize();
});
}, 100);
暂时总结这么多,欢迎补充!