Vue 项目开发常见 bug 整理与解决方案（一）

用 Vue2.0 + Element-UI 框架开发项目过程中，遇到 bug 是常有的事情，这里做一个简单的整理归纳，希望可以帮到遇到类似问题的网友，同时也可以帮自己总结。

一. el-table 组件复用问题

问题描述：做项目的时候经常会用到 el-tabs 标签来做切换，每页内容会复用 el-table 组件。而每页也会对 table 中部分单元做不同的处理（显示或者隐藏），在切换标签的过程中，由于频繁操作，很有可能会出现 table 表头错位。

解决办法：给 el-table 中每个 el-table-column 定义一个唯一的 key 值。其目的也是为了让 vue 可以区分它们，否则 vue 只会替换其内部属性而不会触发过渡效果。截取部分代码如下：\

二、el-cascader 组件渲染问题

问题描述：在使用 Cascader 级联选择器中的 el-cascader 组件进行级联效果实现的时候，想要实现级联选择器中根据指定条件默认选中级联选项的效果，但是设置完默认选项之后虽然可以显示预想的效果，但是总是会报以下的错误。（如图所示）。

 

解决办法：因为 Cascader 下拉进行显示的数据是由后台接口进行提供，在进行默认值显示修改时，将后台返回的数据赋值给 v-model 绑定的数据，进行如此的赋值是能够实现默认值改变显示的，但是在改变榜单类型后，Cascader 的 options 动态的进行了改变，使得 Cascader 的绑定数值在下拉选项中不存在。总之就是因为点击或者选中了父节点改变了榜单的类型，从而 options 进行动态得改变了，改变之后因为没有了这个父节点就会产生报错。

在改变榜单类型，然后 options 改变之后，只需要通过重新渲染 Cascader 组件就可以解决了。我使用了如下的方法进行重新渲染 Cascader 解决的：给 Cascader 设置了一个 key 值（注意需要在先初始化：iscascaderShow: 0）

原理是在改变榜单类型时也顺带着改变下 key 值，key 值改变了，Cascader 就能进行重新渲染了。实现如下：

 

 三. el-input 组件嵌套太深问题

问题描述：input 输入框输入无反应，原因是组件嵌套太深，vue 检测不到视图更新。
解决办法：在失效输入框的 input 事件中加 this.$forceUpdate() 强制刷新，代码如下：