关于element-ui popover组件通过数据渲染出多个popover时点击取消时 popover的显示与隐藏问题

使用场景： 在table组件中删除数据操作时弹出popover提示，通过数据渲染时，会渲染出多个popover。当点击删除按钮展示popover。弹出后点击取消或确定隐藏。

但是官方文档只举例了单个空间的使用方式，若多个组件该怎么使用呢？以下是官方示例：

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

<el-button v-popover:popover5>删除</el-button>

在data中定义visible2为false，点击删除，popover展示；再点击取消或确定按钮的隐藏popover，并处理相应逻辑。

问题：当通过数据渲染出多个popover时就不能通过data中的变量来控制！

解决方案：当数据数据是自定义时，我们可以在每个条数据对象中添加一条属性visible： false

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
        }]

HTML：

<el-table
    :data="tableData"
    highlight-current-row
    @current-change="handleCurrentChange"
    style="width: 100%">
    <el-table-column
      type="index"
      width="50">
    </el-table-column>
    <el-table-column
      property="date"
      label="日期"
      width="120">
    </el-table-column>
    <el-table-column
      property="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      property="address"
      label="地址">
    </el-table-column>
    <el-table-column
      label="操作">
      <template slot-scope="scope">
        <el-popover
          placement="top"
          title="确认删除吗？"
          width="200"
          trigger="click"
          v-model="scope.row.visible">
          <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 type="primary" slot="reference">删除</el-button>
        </el-popover>
      </template>
    </el-table-column>
  </el-table>

给操作按钮添加 slot= "reference"s属性控制popover的现实，且将v-model中的值设为tableData中的visible值。点击取消或确定也要讲对应数据中的visible设为false并处理相关逻辑。若数据为后台返回。可在使用数据时遍历一遍数据，并给每条数据添加一个标识为false即可。

此文仅为个人在项目中实践得出的个人结论，如有不足之处还请读者指点！