前言

今天开发突然发现使用 el-cascader 组件会发生一些样式上的问题bug，这里总结一下。

问题描述

当我使用 element 中的级联选择器，在选中前两个省市之后，在点击第三个区级时，先点击除了叶子以外的节点（市辖区），然后再点击叶子节点（市辖区），就会导致这样的状况出现。

尝试方法

最初考虑将这块直接消失，获取标签并给他附上 display:none 的属性；
使用了@blur 和@focus
不过都有问题：

• @blur会导致 省 就无法获取，因为点击下拉框 判定成失去焦点了；
• @focus依然会出现这种情况，不过当你再获取焦点就能实现消失的效果，但这达不到正常该有的交互效果。想着是直接通过获取标签方法 或者 ref的方法去获取 focus，但得到的都是f ocus没有定义。

解决方法

1. 通过同事的指导，通过:append-to-body=false进行了解决。

2. 先介绍一下：
   append-to-body：是否将弹出框插入至 body 元素。
   

3. 个人理解：
   el-cascader 级联选择器， 组件内部包含了 el-select 。而它的 append-to-body 默认是为 true，然后我这块应该是有5个选择才是正常的情况，但是在第3个时碰到了叶子节点，这时提前触发了这一块导致将弹出框插入到了body元素中，所以就出现了我遇到的错误。