标签：ElementPlusError错误

本文记录一个前端页面开发出现的问题，涉及的前端框架版本为，
- "vue": "^3.2.22"
- "element-plus": "^2.0.4"

1. 问题

近期在使用vue 3 + element plus进行前端页面开发，在前端页面运行过程浏览器后台中出现如下错误消息，

error.ts:12 ElementPlusError: [ElOnlyChild] no valid child node found
    at debugWarn (error.ts:12:18)
    at Proxy.<anonymous> (only-child.ts:35:9)
    at renderComponentRoot (runtime-core.esm-bundler.js:893:44)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5098:34)
    at ReactiveEffect.run (reactivity.esm-bundler.js:167:25)
    at updateComponent (runtime-core.esm-bundler.js:4968:26)
    at processComponent (runtime-core.esm-bundler.js:4901:13)
    at patch (runtime-core.esm-bundler.js:4489:21)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5107:17)
    at ReactiveEffect.run (reactivity.esm-bundler.js:167:25)

出现这个错误消息概率比较高，但不是每次都必现。页面上各个组件按钮都运行正常，出现这个问题感觉有些纳闷，上面的错误消息也没有直接给出哪里不对，一时不知道问题在哪里。

2. 定位

从错误消息[ElOnlyChild] no valid child node found来看，报的是子组件无效，估计是什么组件使用的不当，没有映射到相应的模型数据，是不是哪里变量命名有拼写错误，使用Ctrl+F检查了一番代码，没有发现任何变量拼写错误。

为了发现问题，开始对页面组件进行二分法排查，把页面组件逐一过滤，定位问题出现在如下一个气泡确认框组件上，

<el-popconfirm title="确定要删除吗?" @confirm="deleteConfig(row)">
   <template #reference>
       <el-button type="text" v-if="row.version != 'new'">删除</el-button>
   </template>
</el-popconfirm>

这个组件没有什么特别，之前已经在很多地方用的很好，唯一不同的是添加了v-if控制，稍微判断了一下，应该就是这个v-if导致。

若把上面的el-button去掉，则直接可以复现这个问题，

<el-popconfirm title="确定要删除吗?" @confirm="deleteConfig(row)">
   <template #reference>
   </template>
</el-popconfirm>

气泡确认框组件的用途，主要是在点击某个元素弹出一个简单的气泡确认框，其需要绑定在一个子组件上，若子组件为空，则会报出如下的错误信息，

[ElOnlyChild] no valid child node found...

在了解到如上的问题后，将v-if移到el-popconfirm组件，正确的书写方法为，

<el-popconfirm title="确定要删除吗?" v-if="row.version != 'new'" @confirm="deleteConfig(row)">
   <template #reference>
       <el-button type="text">删除</el-button>
   </template>
</el-popconfirm>

至此问题解决。