element-ui 中的 table如何加Popover弹出框

需求

element-ui 中的 table如何加Popover弹出框_第1张图片
生成的表格的某一列的某几个数据要显示popover框
(我的需求:多种认证方式,当鼠标放在动态二维码认证上时,呼出popover框并显示所需信息,其他认证方式也要显示)

如图所示

element-ui 中的 table如何加Popover弹出框_第2张图片

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

你可能感兴趣的:(element-ui 中的 table如何加Popover弹出框)