elementUI 在Table中使用Popover弹出删除确认框

Popover组件在table中使用,跟官网的会有些差别,用官方的会出现点击删除 不弹出问题.搜了好久,找到这两种解决方案
pClose()方法关闭Popover
方法1:

              
	                
确定 取消
删除

方法1 截图如下:
elementUI 在Table中使用Popover弹出删除确认框_第1张图片

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

方法1 咋一看没啥问题, 实际测试会出现pClose() undefined 报错.
table-tree会出问题(删除三层数据,再删除二层数据)会出现pClose() undefined 报错.
单条table 应该 没有问题.
方法2:

  

        
      
    

方法2效果如下
elementUI 在Table中使用Popover弹出删除确认框_第2张图片
方法二:这里加一个取消按钮,无法让Popover取消.暂未找到解决方案

方法三!!!:完美解决
elementUI 在Table中使用Popover弹出删除确认框问题

tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          visible: false
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          visible: false
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          visible: false
		}]

给数据都加上 visible:false;


          
取消 确定
删除

给操作按钮添加 slot= "reference"属性控制popover的现实,且将v-model中的值设为tableData中的visible值。点击取消或确定也要讲对应数据中的visible设为false并处理相关逻辑。若数据为后台返回。可在使用数据时遍历一遍数据,并给每条数据添加一个标识为false即可。
试了好多种解决方案,方案3 完美解决~
原文:https://blog.csdn.net/Gunahao/article/details/79491879,谢谢

你可能感兴趣的:(table-tree,vue,element-ui)