技術標籤：vuevue.js

前端表頭懸浮文字提示歸類：

element 相關內容非常簡單，https://element.eleme.cn/#/zh-CN/component/tooltip。

如果需要在表格的表頭裡面實現效果，需要藉助:render-header="renderTipsHeader"這個屬性 ，整體的表頭部分如下：

 <el-table-column
          prop="name"
          label="姓名"
          sortable='custom'
          width
 
="180"
      >

• 表格需要達到的效果如下，滑鼠滑過：

實現程式碼如下：

 renderTipsHeader(h, {column}) {
      return (
          <el-tooltip
              class="item"
              effect="dark"
              content={column.label}
              placement="bottom"
          >
            <
 
span>{column.label}</span>
          </el-tooltip>
      )
    }

如果 sortable 屬性被關掉，下面這種樣式還找到一種寫法

實現程式碼如下：

renderTipsHeader(h, {column}) {
      return h(
          'div', [
            h('el-tooltip', {
                  props: {
                    effect: 'dark',
                    content: 'qwe',
                    placement: 'bottom',
                  },
                },
                [h('span',  column.label)])
          ]
      )
      }
 

如果 sortable 屬性被開啟，上面程式碼會顯示成如下效果（懸浮有提示，為了避免遮擋箭頭，沒有截圖），如果需要同一行展示，需要div 修改為 span：

• 通常還有一種樣式，滑鼠到 ？處顯示提示資訊：
  
  注意此處標籤 <el-table-column/>中的sortable屬性是關閉的，不含有箭頭。
  實現程式碼如下：

renderTipsHeader(h, {column}) {
      return h(
          'div', [
            h('span', column.label),
            h('el-tooltip', {
                  props: {
                    effect: 'dark',
                    content: '提示文案',
                    placement: 'bottom'
                  },
                },
                [
                  h('i', {
                    class: 'el-icon-question',
                    style: 'color:#409EFF;margin-left:5px;'
                  })
                ]),
          ]
      );
    }

注意此處標籤 <el-table-column/>中的sortable屬性不關閉，含有箭頭，效果如下（懸浮有顯示，沒有截圖）如果需要同一行展示，需要div 修改為 span：