首页 > 其他 > 详细

element表格内每一行删除提示el-popover的使用要点

时间:2020-06-16 18:38:11      阅读:737      评论:0      收藏:0      [点我收藏+]

最终展示——

技术分享图片

1、按照官网写法,失败。

  点击删除,无法弹出提示。

<el-popover
  placement="top"
  width="160"
  v-model="visible">
  <p>这是一段内容这是一段内容确定删除吗?</p>
  <div style="text-align: right; margin: 0">
    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
    <el-button type="primary" size="mini" @click="visible = false;open()">确定</el-button>
  </div>
  <el-button slot="reference">删除</el-button>
</el-popover>

2、查询后,有人提出,利用scope.row.visible替代现有的visible,

  并且在表格数据初始化的时候,对每条数据都设置一个visible = false

  亲测有效。

  但是当数据过多时,操作有些卡顿。

 

3、最终解决方法

<el-popover class="special-popover":ref="`popover-${scope.$index}`" placement="left" width="160">
    <p class="special-popover-title">确定删除吗?</p>
    <div>
        <el-button type="primary" size="mini" @click="BtnClick()">确定</el-button>
        <el-button size="mini" type="primary"  @click="handleClose(scope.$index)">取消</el-button>
    </div>
    <el-button size="mini" slot="reference">删除</el-button>
</el-popover>
...

methods: {
    handleClose(index) {
      this.$refs[`popover-${index}`][0].doClose()
    }
}

 

element表格内每一行删除提示el-popover的使用要点

原文:https://www.cnblogs.com/Zhang-jin/p/13143428.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!