elementui如何在table中使用正确使用popover

最新推荐文章于 2024-08-20 17:41:03 发布

原创最新推荐文章于 2024-08-20 17:41:03 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue

背景：elementui 在table 中使用popover进行信息二次确认时点击确定、取消按钮存在bug，导致弹窗一直无法关闭。

使用方法：

      <el-table-column fixed="right" label="操作" width="210">
        <template slot-scope="scope">
          <el-popover
            popper-class="popper-class"
            placement="top"
            width="240"
            :ref="`popover-audit-${scope.row.id}`"
            >
            <div>
              <p>请选择审核意见</p>
              <div style="text-align: right; margin: 0">
                <el-button type="text" size="mini" @click="cancel()">取消</el-button>
                <el-button type="primary" size="mini" @click="cancel()">确定</el-button>
              </div>
            </div>
            <el-button 
              type="text" 
              size="small"
              slot="reference"
            >审核</el-button>
          </el-popover>
        </template>
      </el-table-column>


      cancel(){
        document.body.click()
      }

解决方案本质是模拟了点击弹窗外区域弹窗关闭的方法。