业务中经常会遇到多行多列展示的表单需求，所以我们会搭配着栅格组件来实现。利用栅格化布局 span 超过 24 会自动折行的功能。

<el-form ref="form" :model="form" label-width="auto">
  <el-row :gutter="10">
    <el-col :span="12">
      <el-form-item label="字段A">
        <el-input v-model="form.a" placeholder="请输入"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span='12'>
      <el-form-item label="字段B">
        <el-input v-model="form.b" placeholder="请输入"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
</el-form>

如果这样组合使用的同学，肯定会遇到过表单项错位的问题。因为 Element UI 是栅格组件默认是使用的 float 布局的，所以如果你的 <el-form-item> 元素高度不一致的话，就会出现下边截图中布局错位的问题。

字段C项并没有正确出现在字段A项的正下方，而是错开一列出现在了字段B的下方。

前段时间把项目的脚手架升级到 VueCLI 5 同步也升级了一些依赖项。所以这几天都是在自测，看看是不是有一些很明显的 BUG，以及解决一些依赖升级之后的 WARN。

在测试一个下拉菜单（Dropdown）时，发现了一个问题：使用方向键操控会抛出一个异常：
Uncaught TypeError: ele is undefined

查看控制台输出，对应异常抛出的位置是 resetTabindex 函数，在 ele.setAttribute('tabindex', '0') 执行时 ele 是 undefined，所以抛出了这个异常。

那么看函数调用链看 ele 是怎么来的。
👉 是 handleItemKeyDown 函数执行传入的 this.menuItems[nextIndex]

进入调试模式之后发现整个 menuItems 数组是空数组，并没有把我在模板中渲染的 el-dropdown-item 都包含进来。

业务上遇到一个UI的变更需求，要求是把一个 三层数据的级联选择器组件 拆分成 下拉选择组件 + 二层数据的级联选择器组件 的形式去展示。也就是把三层数据的第一层提出来赋值给下拉选择器组件，对应的二级三级数据依旧是在 级联选择组件 中选择。

需求其实很简单，也很快就处理掉了，但是自测的时候就总是会看到控制台会抛出一个异常：
[Vue warn]: Error in callback for watcher "options": "TypeError: Cannot read property 'level' of null

因为在测试环境就下意识以为是因为测试的假数据对不上级联选择器可选项 value 造成的匹配不到对应的层级导致的报错，就没有过多的关注。今天开发完手头上的主体业务回过头来收尾细节的时候发现并不是这么一回事。
其实是由于 <el-cascader> 级联选择器的 options 属性被动态修改而造成的问题。

这边提前说一个简答解决方式：

给级联选择器增加 key 键，让每次 options 修改时重新渲染组件即可。