在vue中用element中的popover，弹框闪现，求教？

Question

点击按钮时,popover删除弹框闪现,刚学前端,救救弟弟

<el-table :data="tableData" stripe style="width: 100%">
<el-table-column label="操作" >
    <template v-slot="scope">
      <el-button type="primary"  icon="el-icon-edit" plain size="mini"></el-button>
      <el-button type="danger" @click="del(scope.row.id)" icon="el-icon-delete" plain size="mini">{{scope.row.id}}</el-button>
      <el-button type="success" icon="el-icon-check" plain size="mini"></el-button>
      <el-popover
        placement="top"
        width="160"
        v-model="visible" :ref="scope.row.id">
        <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">确定</el-button>
        </div>
        <el-button slot="reference">删除</el-button>
      </el-popover>
    </template>
  </el-table-column>
 </el-table>
export default {
data() {
return {
  visible: false
  }
 }
 }

Answer 1

我刚刚测试了一下， 如果数据只有一行是可以的。猜想原因是因为多出绑定了同一个值导致的(小白猜想，不一定正确)。

我想到的解决方式是每行数据中都有一个 visble

html

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

data

  tableData: [
    // 表数据
    {
      ID: 1,
      name: "王小虎1",
      visible:false
    },
    {
      ID: 2,
      name: "王小虎2",
      visible:false
    },
  ],

亲测可行

Answer 2

用这个https://element.eleme.cn/#/zh...
或者把popover放到table外