-知识整理-

echarts resize失效

情况：在window-resize事件下，this.echart.resize()生效，但是点击事件下不生效

原因分析：在别的没有点击事件的元素上点击可以触发resize

原因：有多个点击事件，优先触发resize，然后echarts的父盒子大小才发生改变，即在resize时，当前元素未渲染完毕

解决：1.在原有点击事件中，最后触发resize 2. 用setTimeout延迟触发

 小数计算精度丢失

直接取两位小数：parseFloat(num.toFixed(2))

加parseFloat，如果小数为0的话就直接显示整数了 25（25.00）

 el-button 回车、空格键触发

场景：el-dialog显示时，按回车空格键el-button仍触发，导致多次调用接口

原因：点击el-button后并没有失焦，点击空格回车后会继续触发button的点击事件

解决：阻止默认事件--@keyup.space.native.prevent @keydown.enter.native.prevent

事件修饰符：

1.prevent：阻止默认事件

2.stop：阻止事件冒泡（常用）

3.once：事件只触发一次（常用）

4.capture：使用事件的捕获模式；

5.self：只有event.target是当前操作的元素时才触发事件

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕

 el-table summary-method的死循环

场景：自定义合计行，需要拿到上一次的合计数据，但是表格内有操作触发数据改变，于是自定义方法触发两次，每次都是最新的数据，获取不到上一次的数据

解决：1.监听其中的数组改变，vue2数组无法watch监听，于是用$set,但是，其触发更新视图，导致触发summary-method，循环往复陷入死循环，弃用

2. 在表格内操作改变之前拿到数据：@click.native触发时机比change事件早

@click.native="beforeChange" @change="handleChange"

this.$nextTick的使用

定义：在下次dom更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的dom  理解：即希望拿到数据更新后的dom进行操作

原理：vue视图渲染是异步的，处理完同步后，开始执行异步任务列表，在更新数据后不会立即更新DOM，会在异步任务列表中等待，而this.$nextTick就是在dom更新后立即执行

https://www.cnblogs.com/pwindy/p/14718948.html