vue el-popover实现循环+close_el-popover循环-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_56290677/article/details/118500954

本文介绍了如何在Vue中使用el-table组件实现表格行点击后动态弹出带有关闭功能的弹窗，并通过ref和事件监听管理行级数据。重点展示了如何绑定点击事件、设置ref以及处理关闭操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

重点

<template>
   <section>
       <el-button v-for="(item,index) in List" :key="index" @click="butEvent(scope.$index)">
         <el-popover :ref="`popover-${index}`" >
            <el-button><el-link @click="$refs[`popover-${index}`][row_index].doClose()">关闭</el-link></el-button>
            <el-link slot="reference">{{item}}</el-link>
         </el-popover>
       </el-button>
    </section>
</template>

 butEvent(row_index){
   this.row_index = row_index
}

完整代码

<template>
   <section>
      <el-table
            v-loading="loading"
            :data="tableData"
            border fit
            style="width: 100%"
            :stripe="true"
            :header-cell-style="{background: '#f5f8f9'}">
         <el-table-column label="表格label" min-width="100">
            <template slot-scope="scope">
               <el-button type="text" v-for="(item,index) in List" :key="index" @click="butEvent(scope.$index)">
               <!-- 给显示的弹窗设置ref+col的index -->
                  <el-popover placement="bottom" width="400" trigger="click" popper-class="popover-box" :ref="`popover-${index}`" @show="showEvent(index,item,scope.row.one)" >
                     <ul>
                        <li>
                           <span>标题</span><!-- 给关闭点击事件获取ref+col的index 的row的index进行doClose -->
                           <el-button type="text"><el-link type="primary" @click="$refs[`popover-${index}`][row_index].doClose()">关闭</el-link></el-button>
                        </li>
                        <li>
                           <el-table border fit :data="popover_tableData" v-loading="popover_loading" :header-cell-style="{background: '#f5f8f9'}">
                              <el-table-column label="数据" align="center" prop="one">{{scope.row.one}}</el-table-column>
                           </el-table>
                        </li>
                     </ul>
                     <el-link type="primary" slot="reference">{{item}}</el-link>
                  </el-popover>
               </el-button>
            </template>
         </el-table-column>
      </el-table>
   </section>
</template>

<script>
export default {
   data () {
      return{
         loading:false,         // 表格加载效果
         // 表格数据
         tableData: [{
            one:'colone',
         },{
            one:'coltwo',
         }],

         List:['详情','确认'],
         popover_loading:true,   // 显示表格加载效果
         popover_tableData:[],    // 显示表格数据
         row_index:'',         // 点击row下标
      }
   },
   mounted() {

   },
   methods: {
      // 点击时触发 获取row的下标
      butEvent(row_index){
         console.log(row_index)
         this.row_index = row_index
      },
      //显示时触发       index获取col下标
      showEvent(index,item,tableItem){
         console.log(tableItem+index)
         this.popover_tableData =  []
         this.popover_loading = false
      },
   }
}
</script>

<style scoped lang="scss">
.popover-box{
   ul{
      list-style: none;
      li:first-child{
         display: inline-block;width: 100%; height: 40px;line-height: 40px;
         background: #f2f2f2;
         span:first-child{
            float: left;
            margin-left: 12px;
         }
         .el-button:last-child{
            float: right;
            margin-right: 12px;
         }
      }
      li:last-child{
         padding: 12px;
      }
   }
}
</style>
<style lang="scss">
.popover-box{padding: 0px;}
</style>

待续。。。