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

原创已于 2022-05-30 13:57:48 修改 · 732 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #bug #elementui #前端

收录于

于 2022-05-30 13:53:32 首次发布

博客主要讲述了在前端开发中使用Vue和ElementUI时遇到的一个bug，即点击按钮需两次才能显示弹窗，第一次点击仅出现灰色底色。同时给出了解决方法，在跳弹窗按钮的相应代码前后添加特定代码可解决该问题，但未提及原理。

首先是遇到的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>