Elements Table 指定列 Tooltip 文字提示、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>