Elementplus报错 [ElOnlyChild] no valid child node found

最新推荐文章于 2024-06-29 09:31:24 发布

红烧咸咸鱼

最新推荐文章于 2024-06-29 09:31:24 发布

阅读量1.4w

点赞数 19

分类专栏： element-ui 文章标签：前端 elementplus ElOnlyChild no valid

本文链接：https://blog.csdn.net/weixin_44180579/article/details/136067267

版权

element-ui 专栏收录该内容

27 篇文章

订阅专栏

报错描述：ElementPlusError: [ElOnlyChild] no valid child node found

问题复现（随机例子）：

<el-popover placement="right" :width="400" trigger="click">
      <template #reference>
        <el-button v-if="isClick">点击测试</el-button>
      </template>
      
    <div>测试</div>
 </el-popover>

上面代码中的 isClick 是 onMounted 中调用接口来获取的值，注意：无默认值的情况下才能出现问题。

出现原因：

大概是在页面中使用了elementplus组件中的slot插槽（在插槽中加了v-if判断），执行代码的时候会去检测你的每个元素（包括子元素）,渲染页面到插槽的时候，v-if判断可能还没有渲染出来，elementplus这个时候就会报出警告，提醒你这个地方可能有问题。

源码如下图：

解决方法：

在要使用slot插槽的elementplus组件外面包裹一层 template 或者div ，这样会先执行条件判断逻辑，判断逻辑成立，才会渲染包裹在里面的elementplus组件。