初始写法 使用了v-model 弹窗不显示

<el-dialog v-model="dialogVisible" title="Popup Content" :width="dialogWidth" @close="handleCloseDialog"><p>{{ selectedItemContent }}</p></el-dialog>

将v-model改为:visible.sync="dialogVisible" 就可以了

  <el-dialog :visible.sync="dialogVisible" title="Popup Content" size="large" @close="handleCloseDialog"><p>{{ selectedItemContent }}</p><template v-slot:footer><div style="text-align: right"><el-button @click="handleCloseDialog">关闭</el-button><el-button @click="handleSubmit" type="primary">确认</el-button></div></template></el-dialog>

但是此时的弹窗在遮罩层底下 无法点击关闭

我们还需要增加一个配置：:append-to-body="true"

 <el-dialog :visible.sync="dialogVisible" title="Popup Content" size="large" @close="handleCloseDialog" :append-to-body="true"><p>{{ selectedItemContent }}</p><template v-slot:footer><div style="text-align: right"><el-button @click="handleCloseDialog">关闭</el-button><el-button @click="handleSubmit" type="primary">确认</el-button></div></template></el-dialog>

这样就可以啦 如图：