el-table 中使用 el-popover 点击取消按钮时 popover 框的显示与隐藏问题

2020-12-01

字数统计: 248字 | 阅读时长≈ 1分

直接使用 popover 弹出框的时候，是没有任何问题的，但是在 el-table 中使用 popover 弹出框就会出现，点击取消按钮， popover 框不会隐藏，即使使用 v-model 绑定值，也是不管用的

解决方法如下

1	:ref="`popover-${scope.$index}`"

2.取消按钮添加点击事件，添加 scope 参数

<el-table-column
      label="操作">
      <template slot-scope="scope">
        <el-popover
          placement="top"
          :ref="`popover-${scope.$index}`">
          <p>是否已经回访完毕？</p>
          <div style="text-align: right; margin: 0">
            <el-button
              size="mini"
              type="text"
              @click="cancelBtn(scope)">
              取消
            </el-button>
          </div>
          <el-button slot="reference">回访</el-button>
        </el-popover>
      </template>
</el-table-column>

3. methods 方法中调用 doClose() ：

1	scope._self.$refs[`popover-${scope.$index}`].doClose()

具体如下：

1
2
3

cancelBtn (scope) {
  scope._self.$refs[`popover-${scope.$index}`].doClose()
}

本文作者： Gladysdrea
本文链接： https://gladysdrea.github.io/blogs/2020/12/01/Vue系列/el-table中使用el-popover/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！

1.在 el-popover 中添加属性：

2.取消按钮添加点击事件，添加 scope 参数

3. methods 方法中调用 doClose() ：