Elements Table 指定列 Tooltip 文字提示

 

 

 

<el-table-column show-overflow-tooltip header-align="center" align="right" prop="overdue" label="测试1" width="130px" :render-header="renderTipsHeader"/>

 【野路子版写法】 

// table title 浮窗提示
    renderTipsHeader(h, { column, $index }) {
      let Title = ''
      switch ($index) {
        case 1:
          Title = '测试测试'
          break
        default:
          Title = ''
          break
      }
      const TABLETITLE = [
        h('span', column.label),
        h('el-tooltip', {
          props: {
            effect: 'dark',
            content: `${Title}`,
            placement: 'top'
          }
        }, [
          h('i', {
            class: 'el-icon-question',
            style: 'color:#409EFF;margin-left:5px;'
          })
        ])
      ]
      return h(
        'div', TABLETITLE
      )
    }

重要扩展：

1.Tooltip 文字提示过长 超出屏幕

2.提示文字无法换行

【加上全局css 或者局部】

// Tooltip 文字换行
.el-tooltip__popper {
  max-width: 500px !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  word-break: break-all !important;
}

【内容文本】

使用 \n 进行文本提示进行换行

 【正规写法】

<!-- 收入月份 -->
<el-table-column show-overflow-tooltip align="center" prop="billedDate" width="120px" fixed="left">
  <template slot="header">
    <span>title名称</span>
    <el-tooltip class="item" effect="dark" content="提示语！" placement="top">
      <i class="el-icon-question" />
    </el-tooltip>
  </template>
</el-table-column>