element-ui 中的 table如何加Popover弹出框_element ui popover 动态显示-优快云博客

本文介绍如何在Element-UI的Table组件中实现特定列数据触发Popover弹出框的功能。以动态二维码认证为例，当鼠标悬停在该认证方式上时，Popover会显示详细信息，适用于展示多种认证方式的额外信息。

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

需求

生成的表格的某一列的某几个数据要显示popover框
（我的需求：多种认证方式，当鼠标放在动态二维码认证上时，呼出popover框并显示所需信息，其他认证方式也要显示）

如图所示

在这里插入图片描述

<el-table-column 
	:label="$t('onlineuser.AuthType')" 
	align="center" 
	min-width="100" 
	prop="authtype" 
	sortable>
        <template slot-scope="scope">
          <el-popover 
          trigger="hover" 
          placement="top" 
          <!-- 判断认证方式是否为动态二维码认证 -->
          // 如果不用v-if v-else做限制，就是所有都加popover框，
          // 如果只有v-if没有velse，其他的数据不显示，只有vif里写的判断的数据显示
          v-if="scope.row.authtype == 'dynamicQrcodeAuth'">
          //要显示的数据，内容自拟
            <p>扫码者名称: {{ scope.row.scannername }}</p>
            <p>扫码者IP: {{ scope.row.scannerip }}</p>
            <p>扫码者MAC: {{ scope.row.scannermac }}</p>
            <hr>
            <p>访客名称: {{ scope.row.username }}</p>
            <p>访客IP: {{ scope.row.userip }}</p>
            <p>访客MAC: {{ scope.row.usermac }}</p>
            <div slot="reference" class="name-wrapper">
              <span>{{ roleAuthType(scope.row.authtype) }}</span>
            </div>
          </el-popover>
          //  v-else
          <span v-else>{{ roleAuthType(scope.row.authtype) }}</span>
        </template>
      </el-table-column>