记录开发路上的小坑：elementui中表格cell-click 与 模板中 插入自己的 checkbox的change事件冲突

1、坑的背景：开发页面，需要自己写一个表格的行选中功能以及checkbox的选中，如图：

 这个是可以正常运行的代码，不正常的是把 checkbox外面的span删除，出现的情况是：设置了cell-click  以及 el-checkbox的change方法后，我点击列表的行，ok完成了勾选，我再次点击列表的勾选框，好了，完全没反应！！！

反正最后原因找到了，因为涉及的微任务与宏任务的执行方式以及vue数据更新的原理，大佬跟我讲了半天，我才明白。

 

1、当我点击表格行的时候（除了checkbox区域），可以正常被勾选，但是我点击checkbox的时候，完全不起作用，我以为的是element的bug，两个冲突了，其实并不然。

2、加外面那一层的意思，本质上就是为了阻止事件冒泡！！！，通过打印事件event，我发现点击checkbox的时候，会触发两次事件！一次是基于checkbox外层的span容器（label），这个点击事件会先被触发，然后这个cehckbox会被在一瞬间选中，但是此时dom节点并没有被更新，checkbox还是未被选中的状态，真正被选中的只是el-chekbox的样式生效！！然后这个事件继续冒泡触发了checkbox上的change事件，此时checkbox被勾选。随后来自checkbox的change事件生效（说白了会被触发两次），拿到当前checkbox的状态为已选中，然后就被重新置为false状态，所以无论怎样，都无法选中。所以在checkbox外面外面自己套一层标签（只要你觉得合适都可以的），阻止checkbox的点击事件向上冒泡到 table的子元素label上面去，从而触发到点击行的情况。这里不明白的可以看一下

jQuery event.stopPropagation() 方法 | 菜鸟教程  stopPropagation方法的含义。

其他疑问或者见解可以跟我保持沟通，增进认知，感谢阅读~