vue dialog（vue中使用el-dialog里面使用的el-select选中无法显示值问题）

本文目录

• vue中使用el-dialog里面使用的el-select选中无法显示值问题
• Vue——每次弹出el-dialog，都会执行mounted
• vue 有两个dialog怎么区分
• Vue dialog在打开前加载dialog里的内容
• vue tinymce 控制图片大小上传，以及富文本编辑框在dialog的问题
• 一个页面中有多个el-dialog平级,如何调用
• vue3.0能用el-dialog吗

vue中使用el-dialog里面使用的el-select选中无法显示值问题

    场景一问题描述：页面中有个el- dialog，里面有三个el- select，前两个是联动的，第一次打开el- dialog操作选中是没有问题的，第二次会出现第二个和第三个选中之后先不显示值，过一会才显示，或者是输入其他input的时候就会立即显示
之前查阅资料有的人遇到的问题是定义v-model时用的是对象，但是里面却没有明确定义；我的这个是有明确定义的，所以这个方法不适用
***隐藏网址***

说是层级太深会有渲染问题；所以绑定了change事件强制更新；

但是好奇怪，同样的层级申请科室就没有问题，后面两个有问题；同样的场景别的页面又是有各别会有问题

Vue——每次弹出el-dialog，都会执行mounted

在Vue开发中，有时需要我在同一个页面或列表中，多次加载同一个组件，但问题来了。（例如使用：新增、、详情，使用弹框组件时）
该组件只在页面加载中，加载一次，后面不会再加载了，如el-dialog,解决办法如下，在el-dialog外再加一层div.

div中以v-if来控制组件el-dialog的出现与否,每次弹出el-dialog，都会执行mounted,而不加div,只会执行一次。

vue 有两个dialog怎么区分

vue 有两个dialog区分方法如下。
在我们做项目时，可能会遇到好多需要弹出多个dialog的情况，但有时候会出现，前边出现的dialog会遮挡将要出现的dialog，使其不能好好显示。

Vue dialog在打开前加载dialog里的内容

原文地址

为解决dialog在首次打开时数据或组件没有加载的问题 这里使用一种简单粗暴的方法

dialog加载的依据是dialog的属性rendered（v-if="rendered"）决定的，所以需要将rendered改为true,但有时会不生效 所以在前后分别打开和关闭dialog就可以了。 

vue tinymce 控制图片大小上传，以及富文本编辑框在dialog的问题

项目需求需要用到富文本框，表格中操作富文本框，最后选择用弹框的形式显示，注意弹框和富文本框的坑

原因：第一次弹框tinymce 组件未销毁，因此先于第二次dialog弹出，而第二次dialog中的传值也就后于富文本组件初始化，也就未被渲染了。
v-if="dialogFormVisible"

原因：tinycme和dialog中的样式冲突了，当我们F12把页面缩小，会发现，并不是点击toolbar没反应，而是菜单栏（toolbar）被置于底层了，dialog盖住了菜单栏
解决：修改tinycme中的样式文件，z-index: 都+00000，此文件中有多处z-index,请全部修改（另外，z-index = -1 这种就不需要修改了）

一个页面中有多个el-dialog平级,如何调用

最近使用vue+elementUI做项目，自然少不了dialog这个组件的使用，关于dialog嵌套有两个小问题总结下。
1.dialog嵌套时，内层dialog上有遮罩层，无法点击。
关于这个，其实官方网站在介绍嵌套的dialog时也有提到：
正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套
Dialog 的场景，我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body
元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。
内层的dialog在使用时，需要加上append-to-body属性，官方诗示例为： 《el-dialog width="30%" title="内层 Dialog" :visible.sync="innerVisible" append-to-body》 《/el-dialog》
2.嵌套dialog为父子组件关系时，子组件（内层dialog）关闭后无法打开。关于这个问题，之前百度的方法都是在子组件监听父组件传过来的值，并在子组件的dialog执行close方法时，像父组件传递一个false的状态值。最近在查看官方有关计算属性的文档时，发现这个完全可以用计算属性解决，现将两种方法父子组件的代码分别示例，大家可根据个人习惯选择使用：
父组件代码段（两种方法相同）：
《template》
《div》
《el-button type="primary" @click="outerVisible = true"》点击打开外层 Dialog《/el-button》
《el-dialog title="外层 Dialog" :visible.sync="outerVisible"》
确定删除这条信息吗？
《div slot="footer" class="dialog-footer"》
《el-button @click="outerVisible = false"》取 消《/el-button》
《el-button type="primary" @click="innerVisible = true"》确认《/el-button》
《/div》
《/el-dialog》
《child :innerVisible="innerVisible" v-on:innerDialog="getInnerStatus($event)"》《/child》
《/div》
《/template》
《script》
import child from "./child";
export default {
name: "father",
components: { child },
data() {
return {
outerVisible: false,
innerVisible: false
};
},
methods: {
getInnerStatus(status) {
this.innerVisible = status;
}
}
};
《/script》

vue3.0能用el-dialog吗

1.首先在vue的 .vue文件中加入 dialog模板《el-dialog title="科室管理员新增" :visible.sync="dialogFormVisible"》《/el-dialog》
2.在dialog的模板中加入 div以及样式表，显示你所需要显示的内容和样式。
3.一般如果显示dialog都是在需要的时候在显示出来，完成的时候隐藏起来，那么就需要设置dialog的可见性，加载的时候设置为 不可见即可，在data() {
return{中添加
4.如果需要dialog显示出来，需要一个触发事件，我们来设置一个按钮，点击的时候出发onclick时间
5.点击增加时候时候出发onclick时间中的handleCreate方法，在methods中添加handleCreate(){}来显示dialog，this.dialogFormVisible = true;主要是把dialog可见性修改为可见
6.在dialog修改完之后需要隐藏，这就需要触发另外一个click事件，比如设置的dialog为添加事件，添加时候出发
@click="createData"，当返回的数据显示更新完成才能隐藏
7.也可以不触发事件而是直接取消该操作就直接隐藏掉dialog即可
《el-button @click="dialogFormVisible = false"》取消《/el-button》