Solvedelement [bug]在el-table中使用el-popover,没法点击确定或取消来关闭el-popover。

如题,在el-table中使用el-popover,没法点击确定或取消来关闭el-popover。

怀疑是作用域的问题,但是我把v-model改成row.visible2,@click的时候row.visible2 = false,这样也不行。所以感觉应该是个bug。
在talble外面使用el-popver是没问题的,而且点击popover区域外的地方也可以关闭popover,偏偏不能通过改变visible2 = false来关闭,不知道现在还有没有其他方式暴露出来可以控制hide。

参考代码:http://jsfiddle.net/acx0gnx3/ ,点击删除打开popover。

49 Answers

✔️Accepted Answer

@istobran 或许这样比较完美吧
element-ui@2.0.8

<el-table-column width="100" align="center" label="操作">
  <template slot-scope="scope">
    <el-popover width="160" :ref="`popover-${scope.$index}`">
      <p>确定删除该项吗?</p>
      <div style="text-align: right; margin: 0">
        <el-button type="text" size="mini" @click="scope._self.$refs[`popover-${scope.$index}`].doClose()">
          取消
        </el-button>
        <el-button type="danger" size="mini" >确定</el-button>
      </div>
      <el-button type="text" slot="reference">删除</el-button>
    </el-popover>
  </template>
</el-table-column>

Other Answers:

楼上的处理个人觉得还是繁琐了点。我的处理方法:

此方法其实在官方的表格文档中已有示例,但只有 hover 的方式,click 的方法需要做个 hack:

  1. 不通过生成的 el-popover v-model 来控制弹出框的显隐,由组件自动处理。
  2. trigger="click" 触发弹窗时,如果在弹窗中有取消按钮,可以给按钮绑定一个事件,此事件触发页面任意其他位置的点击,从而自动隐藏弹窗。
<template>
    <div ref="page">
    ...
      <template scope="scope">
         <el-popover trigger="click" placement="left-start">
                <p>确定要删除 <span class="sf-red">{{ scope.row.name }}</span> 吗?</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click.native.prevent="$refs.page.click()">取消</el-button>
                  <el-button size="mini" type="primary" @click.native.prevent="handleOperationButtonClick(scope.row)">确定</el-button>
                </div>
                <el-button slot="reference" type="text" size="small">删除</el-button>
          </el-popover>
       </template>
    ...
    </div>
</template>

关于循环中使用popover出现的问题,不建议使用【为data数据的每个item加visible属性】的方式。
尤其当data在vuex中管理的时候,点击reference slot打开popover时对visible的修改并不符合vuex所要求的action->commit->mutation->state的数据修改原则,并会报错。

使用ref更简单易懂。如下:

<el-table-column width="100" align="center" label="操作">
  <template scope="item">
      <el-popover placement="top" title="确定删除?" width="200" :ref="'popover-' + scope.row.id" trigger="click">
        <p>确定要删除当前记录吗?</p>
          <p class="text-danger">将同时删除该机构的所有下级机构!</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="pCancel(scope.row.id)">取消</el-button>
            <el-button type="primary" size="mini" @click="pSubmit(scope.row)">确定</el-button>
          </div>
          <el-button slot="reference" size="mini">删除</el-button>
      </el-popover>
  </template>
</el-table-column>

不一定是id(scope.row.id),只要能具备唯一性就好。

methods: {
  pSubmit(row) {
    new Promise().then(_ => {
        /***submit处理后***/
        this.pClose(row.id)
    })
  },
  pCancel(id) {
    this.pClose(id)
  },
  pClose(id) {
    this.$refs[`popover-` + id].doClose()
  }
}

使用了el-popover组件的doClose方法。
el-popover组件还提供了一些其他方法,也可以去看看,能解决一些疑难杂症。

<div ref="closepopover">

<el-table-column  label="操作">
 <template slot-scope="item">
  <el-popover
    placement="right"
    title="确定删除?"
    width="200"
    v-model="item.row.visible"
    trigger="click">
    <div style="text-align: right; margin: 0">
      <el-button size="mini" type="text" @click="updateVisible()">取消</el-button>
      <el-button type="primary" size="mini" @click="updateVisible()">确定</el-button>
    </div>
    <el-button slot="reference">删除</el-button>
  </el-popover>
</template >
</el-table-column>


//完美解决
updateVisible(){
    this.$refs.closepopover.click();
}

More Issues: