动态组件渲染为 Cascader，所有选项为空的 Bug

今天封装一个简易动态表单组件的时候遇到了一个的 Bug 分享下，避免踩坑。我使用动态组件来加载一些表单组件，对于大多数组件来说，插槽（slot）是不必要的，但有些控件则需要。比如 el-select ，需要 slot 来挂载选项

<Component
  v-bind="column.attrs"
  :is="mapComponentType(column.attrs)"
  v-model="formModel[column.formItem.prop]"
  v-on="handleEvents(column.events)"
>
  <template v-if="column.attrs.component === 'Select'">
    <el-option
      v-for="option in column.attrs.options"
      :key="option[column.attrs.fieldNames?.value ?? 'dictCode']"
      :label="option[column.attrs.fieldNames?.label ?? 'dictLabel']"
      :value="option[column.attrs.fieldNames?.value ?? 'dictCode']"
    />
  </template>
</Component>

在 Component 渲染为 select 的时候单独处理 el-option，其他组件的时候则不渲染。这样看着似乎没有任何问题，因为我们的认知中 v-if 是不会渲染这部分内容的，但是当 Component 渲染为 Cascader 组件的时候，展开 Cascader Options 发现是空白的

一开始毫无头绪，完全不知道哪里出了问题，代码看着也很正常，也没有报错信息。于是我就去 element-plus Github 翻 issues，果然还真有人遇到了一样的问题，这里有个搜索 issues 技巧

可以根据你的问题 关键字 去快速搜索到目标 issue

https://github.com/element-plus/element-plus/issues/5428

可以看到和我遇到的是同样问题

这个回答说 <slot> 引起的，当我把 Component options 删掉后，果然 Cascader 正确渲染出来了，看来果然是 <slot> 引起的

注意

这里不能直接注释掉 options，因为 注释 也是一个元素，具体原因接着往下看

可以看到你即便是注释掉它也会占据 default slot，接着看下面一个回答

https://github.com/element-plus/element-plus/blob/089064c7f29ce284a807cbd20efc3c802bab23fa/packages/components/cascader/src/cascader.vue#L150

可以看到 Cascader 组件的源码 renderLabel 这里接收了一个 default slot，再来说说上面的为什么加了 v-if 后它还是被当做 default slot 渲染了，其实很简单，你只需要检查开发工具上的元素即可看到图中 v-if 是个注释标签，他被渲染进了一个 class 名为 el-cascader-node__label span 标签中，阻挡了默认内容