[JavaScript知识库]【vue】el-popover遍历渲染

1.示例图

2.示例代码

<template>
  <div>
    <el-popover placement="bottom" v-for="(item,index) in list" :key="index" width="250" trigger="manual" :ref="`popover-${item.id}`">
      <div class="title">
        <i class="el-icon-warning"></i>
        <span>提示</span>
      </div>
      <div>操作不可撤销，确定删除吗？</div>
      <div style="text-align: right;">
        <el-link class="mr10" type="primary" size="medium" @click="$refs[`popover-${item.id}`][0].doClose()">取消</el-link>
        <el-button type="danger" plain size="medium" @click="remove(item.id)">删除</el-button>
      </div>
      <el-button slot="reference" @click="handleClick(item.id)">{{item.name}}</el-button>  
    </el-popover>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        list: [
          {
            name: '测试1',
            id: 1
          },
          {
            name: '测试2',
            id: 2
          },
          {
            name: '测试3',
            id: 3
          }
        ]
      }
    },
    methods:{
      handleClick(id){
        this.$refs[`popover-${id}`][0].doShow()
      },
      remove(id){
        //删除操作
        this.$refs[`popover-${id}`][0].doClose()
      }
    }
  }
</script>