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>
只是热爱开发的小渣渣!!