记录vue-element-template添加弹窗时，遇到的bug

已于 2022-05-30 13:57:48 修改
阅读量576 收藏
点赞数
文章标签： vue.js bug elementui 前端
于 2022-05-30 13:53:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ven_cy/article/details/125045139
版权

首先是遇到的bug是要点击按钮两次，才能显示弹窗，第一次点击如下图，灰色底色

第二次才能正常显示弹窗

解决方法：

如下图，在跳弹窗的按钮的相应代码前后，加上矩形方块内的代码，即可解决问题，原理我也不清楚...

<el-table-column label="操作" width="300" align="center">
  <template v-slot:default="">     //添加的代码
    <el-button icon="el-icon-s-data" type="primary" @click="showRate('success')" >查看学习进度</el-button>
    <study-rate v-if="StudyVisible" ref="dialog1"></study-rate>
    <el-button icon="el-icon-delete-solid" type="danger" >删除</el-button>
  </template>                        //添加的代码
</el-table-column>

Ven_cy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
记录:element 的dialog嵌套问题，第二次弹出的会被遮住，怎么解决?【亲测有效】
**My Coding Family**
04-02 2万+
记录:element 的dialog嵌套问题，第二次弹出的会被遮住，怎么解决?【亲测有效】
弹窗里面显示表格打开一次后，以后table不会变化（刷新）的问题
qq_46490956的博客
02-21 1185
弹窗里面显示表格打开一次后，以后table不会变化（刷新）的问题
成功解决：el-dialog弹出窗口、数据第一次没有加载、第二次打开才能加载数据。（每次页面刷新后、第一次打开dialog窗口、图片数不加载）
做笔记\记录遇到的程序bug
10-13 1690
在查看图片的时候、点击预览按钮，将图片放入dialog弹出框中。然而每次页面刷新、首次预览图片、打开的窗口中并没有图片展示？？？
Dialog Fragment使用与填坑
qq_42780052的博客
07-24 6948
本文介绍Dialog Fragment的自定义布局使用，简单暂不介绍        DialogFragment 是Android 官方推荐使用 来代替 Dialog ，可以让它具有更高的可复用性（降低耦合）和更好的便利性（很好的处理屏幕翻转的情况），下main来让我们看看他具体怎么使用。   &nbs...
vue-element-admin 页面内点击进入详情(弹窗形式)
也简的博客
12-17 2468
vue-element-admin 页面内点击进入详情(弹窗形式)
vue-admin-template：基于element-vue-admin的框架进行改造的一个viue前端开发框架
02-14
cd vue-admin-template # 安装依赖 npm install # 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org # ...
VueOA-:基于vue-element-admin做的一个企业OA管理系统
05-20
vue-admin-template这是一个极简的 vue admin 管理后台。...进入项目目录cd vue-admin-template# 安装依赖npm install# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm
sf-vue-admin:E基于EggJs + TypeScript + TypeORM + Redis + MySql + Vue + Element-UI编写的一个简单高效的前替代分离的权限管理系统
04-02
sf-vue-admin dev分之为开发分之，目前正在整体重建。 注意：请使用master分之或者egg分之。master分之支持midway版，egg分之支持egg版。 构建设置 # 克隆项目 git clone ...
template-vue-admin:vue2 + vuex + element-ui管理后台模板
03-21
template-vue-admin 说明 eslint airbnb验证 stylelint标准验证 部分功能需要调整支持，可以直接查看原始里的使用方式（如快照上传，图片裁剪等） babel-eslint如果升级到9以上（包含9），会导致i18n里的语言懒加载...
ebase-fast-vue：这是一个ebase-fast管理后台。我们原始克隆了vue-admin-template脚手架。现有版本为v4.0 +基于vue-cli进行构建
02-10
进入项目目录cd ebase-fast-vue# 安装依赖npm install 或者 yarn install# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题npm install --registry=https://reg
vue3 antd项目实战——修改和增加公用一个弹窗（页面组件传值）
XSL_HR的博客
06-02 5011
一篇文章教你学会如何在vue antd项目实战中将修改和增加共用一个表单的骚操作
如何封装一个Vue + ElementUI的弹窗组件
三拾的博客
03-10 3597
本文将介绍如何封装一个Vue和ElementUI的弹窗组件。弹窗组件是Web开发中常用的交互组件，可以用于展示一些重要信息、警告，或者用于用户的输入。
vue自定义全局弹出询问框、输入框、提示框、toast(附源码)
gdgztt的专栏
03-05 5305
早前写过一篇关于vue自定义弹出询问框、输入框、提示框的贴子，当时只是实现了组件化，组件需要在各个业务模板进行引用，不能全局化使用，不太方便，本次将其改进成了全局使用，具体的业务模块不需要引入组件，直接调用main.js注册的全局方法即可。遮罩层样式，自定义组件，子组件套用组件，子组件调用父组件方法，组件属性监听，输入框默认获得焦点，输入框数据双向绑定、组件注册。
antd-vue对表单进行编辑，上传的文件没有回显解决方法
木木木不哭的博客
03-30 1182
antd-vue对表单进行编辑，文件没有回显解决方法
解决vue中第一次点击按钮无数据，第二次点击有数据
weixin_56042678的博客
04-11 1960
一般情况下看我们有没有声明接受数据的变量，如果没用声明的话，第一次点击按钮才会去声明变量，所以不会拿到数据，当第二次点击按钮时，此时就会拿到数据。解决方法，在return里面声明接受参数的变量，这样第一次点击按钮就可以拿到数据了。如果我们需要拿到数据，但是点击按钮数据没用拿到。
el-table表格组件中的滚动条首次进入页面不显示，第二次进入页面时才会显示
qq_49017797的博客
08-17 695
el-table表格组件中首次点击左侧页面的导航或者点击右侧页面下面的分页，导航条都不显示，第二次点击或者偶尔切换页面时才会显示导航条。
vue数据更新后，表格没有更新，需要点击两次才更新
weixin_41498246的博客
05-30 5793
1、在《el-table》中加入属性 ：key=“key” 2、在data中加入变量的定义并初始化 3、在methods的函数中通过对变量的自增，从而触发el-table 的刷新
Vue表格，mounted里面拿的数据table第一次没回显，重新点进来才有
xuxiangyu827的博客
03-29 1225
做个笔记： 目前是这样子解决的，在a-table中： ：columns = "getcolumns()" getcolumns（）{ return columns } 这样子就可以了，有更好的办法以后回来改
elementUI的Dialog对话框使用过程中出现灰色遮罩点击才关闭遮罩问题解决办法
super码力的博客
06-06 3787
elementUI的Dialog对话框使用过程中出现灰色遮罩点击才关闭遮罩问题解决办法，可以使用官方文档里面提供了一个append-to-body的属性解决
vue-element-template 下载
最新发布
09-03
要下载vue-element-template模板，你可以访问以下链接进行下载：https://gitee.com/seventeenw/vue-admin-template 。在下载完成后，你可以按照以下步骤进行安装和启动： 1. 克隆项目：使用git命令将项目克隆到本地，命令如下： ``` git clone https://github.com/PanJiaChen/vue-admin-template.git ``` 2. 进入项目目录：使用cd命令进入项目目录，命令如下： ``` cd vue-admin-template ``` 3. 安装依赖：运行npm install命令来安装项目所需的依赖包，命令如下： ``` npm install ``` 4. 注意：建议不要直接使用cnpm安装依赖，因为可能会出现各种诡异的bug。你可以通过以下命令解决npm下载速度慢的问题： ``` npm install --registry=https://registry.npm.taobao.org ``` 5. 启动服务：运行npm run dev命令来启动项目的开发服务器，命令如下： ``` npm run dev ``` 这样，你就可以开始使用vue-element-template进行开发了。请注意，以上步骤是基于git和npm的，所以请确保你已经正确地安装了这些工具。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue-element-template 从零开始的开发流程](https://blog.csdn.net/qq_42829628/article/details/106963907)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue-element-template 做后台（一）安装](https://blog.csdn.net/immocha/article/details/105574064)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值