这帖子是不用多高超技术或者是什么歪门邪道，只是做的过程中遇到很多的坑，我感觉我做的这个没人能遇到比我还多 [因为使用场景而产生] 的坑。。。想记录一下，原本是产品叫我找别的级联的插件，我真的觉得不想在一个项目里用很多插件，还是想着用原来的改
原生element的cascader级联组件是这样的（如下）
我司产品因为某些让人无语的理由就想给下拉的部分底部加两个按钮“重置”，“确定”，这不是让我改第三方的组件吗，想到我就脑壳疼，于是做了个button的样式，emm..就是如此
接下来就是嫁接了，打开Chrome的F12，
发现只要加在这个地方后边就可以有我要的效果：
看起来完美极了惹，那接下来就是代码实现了。
因为是element的内置组件，就不想着改他的源码了，只能想着用js操作DOM去移花接木了，实现也不难，因为原生js写起来太冗长了而且还是JQuery用的爽，直接在项目里引入JQuery它不香吗。
<ps:当时命名m-extra也是因为我觉得这个需求就是很多余。。
JS主要部分：
mounted***第一个坑*：
element组件的所有有下拉框的组件，它的上部分跟下部分都是分开的，不在同一个父级下，一开始我写的DOM操作就是
$当然会出错因为不是它的儿子。
目测已经是可以的了，用起来也没啥问题
其实一般的场景的话我们的代码已经写完了。
呵呵。。
但是我们的场景是三个有着一样的级联选择的同级的页面，
切来切去的时候出现了
那就每次进来先删掉全部的$('.m-extra)再加它
/**
这个时候又发现点着点着有的页面上下拉框突然就没有按钮了，才发现是自己傻了 把全部的.m-extra都删了之后还想让DOM添加.m-extra 这不是扯淡么
又改进
/**
然后发现有的时候重置跟确定点了没反应，因为是三个页面切来切去，所以有的时候可以有的时候不行，搞得很烦，这个排除了很久，因为不确定成分很多，后边还是面向百度编程一下 改进了一下动态DOM事件委托
/**
发现在切换页面之后的点击还是无效，查看了DOM元素才发现这组按钮是上一个页面的，这个部分试了很多方法都，找不到原因的这时我几乎快崩溃了，觉得产品老是觉得一个需求很简单却让我能搞疯！！！终于，在页面的生命周期钩子都打断点才发现每个页面的created跟mounted都只有第一次进来的时候执行了一次，后边都不执行，开始怀疑路由缓存keep-alive，原来这三个页面都被添加了keep-alive的属性，我又重新温习了一遍vue router，才发现当页面被缓存的时候，有两个生命周期会在进出的时候生效【activated,deactivated】,这在之前我倒是没用过这个钩子。
activated 终于，在小心翼翼的试了好几次切换跟重置确定一顿乱按之后居然没有问题！
开心！
ps:不过好怕测试拿过去直接丢个更可怕的bug过来哦
这些因为使用场景带来的坑终于解决完了，解决完的那一刻就觉得好值得被记录哦。
首次写文，写的不好表达的不好还请见谅
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
