自定义el-popover的开关【解决】

_CherryBoom_

已于 2024-07-17 20:54:45 修改

阅读量457

点赞数 2

文章标签： vue.js elementui 前端

于 2024-07-17 20:50:59 首次发布

本文链接：https://blog.csdn.net/m0_71266141/article/details/140505050

版权

el-table需要增加一行可以单块编辑的部分需要弹窗一个下拉框选中后可以点击确认取消按钮

不是点不开就是关不上不然就是报错
一系列搜索后使用了ref的方法

给每个popover加上了ref（id唯一）（请注意使用ref后v-model这里就不要加了会互相影响）

点击开启关闭方法就使用popover提供的doShow()和doClose()方法

doShow我使用的时候点不开，换成了show()可以打开但是会报错（如下），然后在打开的方法里使用doShow()方法增加了document.body.click()一行成功打开，关闭也能正常使用

详细代码

  <el-table-column label="测试" width="230">
          <template slot-scope="scope">
            <el-popover
              placement="bottom"
              width="200"
              trigger="click"
              :ref="'pop' + scope.row.id"
            >
              <!-- v-model="typeVisible" -->//！！这里的typeVisible是一个遗漏点，第一次我把typeVisible跟ref都写上了导致一直点不开
             //内容省略
             //确定取消按钮
              <div style="text-align: right; margin: 0">
                <el-button
                  size="mini"
                  type="text"
                  @click="auditClose(scope.row.id)"
                  >取消</el-button
                >
                <el-button
                  type="primary"
                  size="mini"
                  @click="auditClose(scope.row.id)"
                  >确定</el-button
                >
              </div>
              <el-button
                slot="reference"
                type="text"
                size="medium"
                icon="el-icon-edit"
                class="text-button-edit"
                style="margin-left: 6px"
                @click="auditClick(scope.row.id)"
              />
            </el-popover>
          </template>
        </el-table-column>

  auditClick(id) {
      this.$refs[`pop${id}`].doShow();
//本来用doShow打不开然后换了this.$refs[`pop${id}`].click()this.$refs[`pop${id}`].show()都能打开，继续百度最后在下方加了document.body.click()以后不报错了
      document.body.click()
    },
    auditClose(id) {
      this.$refs[`pop${id}`].doClose();
    },

效果图