添加问号提示语

855 阅读1分钟

一、表格内标题添加问号提示语

例如:我在项目中 以下是表格的一部分内容

<el-table-column label="主播佣金" :render-header="renderHeader" align="center" width="120px">
  <template slot-scope="{ row }">
    <span style="color:red;">{{ row.commissionRate }}%</span>
  </template>
</el-table-column>

使用 :render-header="renderHeader"方法

renderHeader(h, { column, $index }) {
  const currentLabel = column.label
  return h('span', {}, [
    h('span', {}, currentLabel),
    h('el-tooltip',
      { props: { placement: 'top-start', width: '200', trigger: 'hover', content: '给主播的佣金比例,主播佣金=(直播价-直播供货价)÷直播价' }},
      [
        h('i', { class: 'el-icon-question' })
      ]
    )
  ])
},

效果展示:

image.png

文字可以换行

image.png

image.png

<template slot-scope="scope" slot="header">
    <span>
    总成交订单金额
    <el-tooltip :aa="scope" class="item" effect="dark" content="" placement="top-start">
      <div slot="content">总成交订单金额:所选时间段范围</br>内当前达人所有已支付订单实付</br>金额总数,包括售后中的订单</div>
      <i class= 'el-icon-question' style="color:#409eff; margin-left:5px;'"> </i>
    </el-tooltip>
  </span>
</template>

二、不是表格添加划过问号提示图片

<el-popover
  placement="right"
  title=""
  trigger="hover"
  v-if="isHeader == 1"
>
 <el-image  :src="require('@/assets/goods_images/goods_id.png')" style="width: 650px;height: 400px"></el-image>
  <el-button type="text" slot="reference">  <i class="el-icon-question"></i></el-button>
</el-popover>

image.png