el-popover在el-table中，弹出多个以及内部取消按钮无效问题

最新推荐文章于 2024-08-29 16:45:28 发布

桐小烨

最新推荐文章于 2024-08-29 16:45:28 发布

阅读量2.4k

点赞数 1

文章标签：前端 vue.js elementui

本文链接：https://blog.csdn.net/Abcde467913/article/details/127189518

版权

本文介绍了在Vue3项目中，使用ElementUI的el-popover组件与el-table结合时遇到的弹框多次出现及内部取消按钮无效的问题。通过分析官方文档和其他解决方案，提出了使用evaluateID标记点击行索引来控制弹框显示与关闭的方法。详细代码展示了如何在setup语法糖中实现此功能，最终实现了点击评价仅显示一个弹框，点击取消能有效关闭弹框的目标。

摘要由CSDN通过智能技术生成

发现问题：

当el-popover和el-table同时使用的时候，当设置弹框内部按钮时候，官方文档只有visible/v-model:visible两种设置方式。

当直接在<el-popover>中设置v-model又会出现点击一次按钮，多个弹框情况：

<!-- 遇到的问题 -->
          <div style="display: flex; align-items: center">
            <el-popover
              placement="top"
              width="auto"
              trigger="click"
              title="评价队友"
              v-model:visible="evaluateVisible"
            >

              <template #reference>
                <el-button
                  type="primary"
                  link
                  size="default"
                  @click="evaluate(1, scope.$index)"
                  >评价</el-button>
              </template>

              <div style="margin-top: 20px">
                <el-radio-group v-model="evaluateDa.tagList">
                  <el-radio-button label="大神" />
                  <el-radio-button label="无私" />
                  <el-radio-button label="风趣" />
                  <el-radio-button label="其它" />
                </el-radio-group>