element-ui的表格popover操作的显示/隐藏

rongxingsun
  • 4
新手上路,请多包涵
回复
阅读 21.1k
3 个回答

https://segmentfault.com/q/10...
在这个问题中有一个简单粗暴的方法,我认为比官方提供的方式更友好。
使用document.querySelector("#app").click();的方式模拟点击

页面代码:

<el-table-column label="操作">
  <template scope="scope">
    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
    <el-popover ref="popover{{$index}}" placement="right" v-model="scope.row.visible2">
      <p>这是一段内容这是一段内容确定删除吗?</p>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="scope.row.visible2 = false">取消</el-button>
        <el-button type="primary" size="mini" @click="scope.row.visible2 = false">确定</el-button>
      </div>
    </el-popover>
    <el-button size="small" type="danger" v-popover:popover{{$index}}>删除</el-button>
  </template>
</el-table-column>

tableData 加visible2参数

{
  date: '2016-05-02',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1518 弄',
  visible2: false
}

在table里直接引入popover 可能会导致多个row都有popover对象,且绑定值引用到同一个对象。可以封装一个button,在封装的button里写个popover逻辑。
我改了下不再table中引入popover时的关闭poover, 你看看。 希望有帮助。
https://jsfiddle.net/d1qtfo6L...

宣传栏