表单禁用态切换引发el-cascader显示异常分析与解决

背景 & 问题

最近有一个需求用到了el-cascader，需要支持多级数据的选择。我们的产品，在进入表单编辑时，表单是默认禁用的，用户在需要编辑时需要点击一个按钮使得表单状态从禁用到可编辑。在这个过程注意到，el-cascader显示的ui会有错乱问题，具体表现如下图：

所选中的选项和当前el-cascader的长度相符时，会复现该问题。

el-cascader的代码如下：

<el-form-item
    label="国家或地区"
    :prop="`region_access_control.list.${idx}.country`"
    :rules="rules.country"
    class="access-control-item"
>
    <el-cascader
        v-model="itm.country"
        :options="countryOptions"
        :props="{ expandTrigger: 'hover', multiple: true, emitPath: false }"
        :show-all-levels="false"
        style="width: 100%"
        clearable
        filterable
    >
    </el-cascader>
</el-form-item>

问题分析 & 解决思路

遇到该问题时首先怀疑是el-cascader宽度不足的问题导致，但是后续分析了下，即使宽度再怎么调整，也会有所选中的选项和输入框长度相符的情况，所以这个想法作罢。

接着尝试在复现该问题的场景下，将一个已选中的选项取消勾选，再选中。注意到这时候el-cascader会重新触发标签宽度的计算，以及为选中的标签尾部增加 "x"，此时怀疑是否是el-cascader内部更新样式的代码没有触发。于是去看了el-cascader的源码，发现内部实际上是通过这样一条链路去触发样式重新计算：

watch(disabled属性) -> 调用computePresentContent -> 调用computePresentTags

接着就尝试去验证这条链路上哪一步没有触发。首先打印出来computePresentContent方法，并在浏览器中为其添加断点，然后尝试禁用/启用表单，发现没有触发该断点。尝试选中其他标签，可以触发断点。到这一步，怀疑是watch监听的disabled处就没有调用computePresentContent方法。接着在源码中查找disabled，发现这是一个prop，需要主动传入。由于我们上面代码中没有传入这个prop，所以我们表单禁用/启用状态的变更就没有触发watch。

紧接着我就有一个疑问，为什么el-cascader在我没有传入disabled的时候，会跟随外层el-form的状态变更变得禁用或者可选择？

接着深入源码发现，el-cascader内部依赖了两个disabled，一个是我们传入disabled的，另一个是inject的elForm.disabled。两者共同生效：

    isDisabled() {
      return this.disabled || (this.elForm || {}).disabled;
    }

但是，后者并不会触发标签的重新计算。所以会出现上述的问题。至此问题已经很明了了，我们只需要将表单的外层控制表单组件的disabled也传入el-cascader中，就能在禁用状态变更时，重新计算标签高度。