最近在开发中发现使用elementUI中template自定义文本,由于文本的长度较长,缩略展示配置:show-overflow-tooltip="true",但没起作用。
<el-table
:data="dataSource"
:max-height="tableH"
:height="tableH"
v-loading.body="loading"
border
style="width: 100%; margin-top: 10px;">
<el-table-column
prop="date"
label="运营日"
:formatter="formatDate"
:show-overflow-tooltip="true"
width="40">
</el-table-column>
<el-table-column
label="号码"
:show-overflow-tooltip="true"
width="60">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<p>
{{scope.row.airCrftRegNbr}} 测试一下长文本展示效果
</p>
</div>
</template>
</el-table-column>
</el-table>
效果如图所示:
解决方法:
<el-table
:data="dataSource"
:max-height="tableH"
:height="tableH"
v-loading.body="loading"
border
style="width: 100%; margin-top: 10px;">
<el-table-column
prop="date"
label="运营日"
:formatter="formatDate"
:show-overflow-tooltip="true"
width="40">
</el-table-column>
<el-table-column
label="号码"
:show-overflow-tooltip="true"
width="60">
<template slot-scope="scope">
<span v-html="show(scope.row)"></span>
</template>
</el-table-column>
</el-table>
<script>
methods: {
show(row) {
return row.airCrftRegNbr + " 测试一下长文本展示效果"
}
}
</script>
效果:
使用v-html是为了将 空格占位符展示出来。
如果不涉及到转换为html效果的话,可以在el-table 中配置
:formatter 如下图:
再在methods写:
/**
* 格式化起降时间
*/
formatQjsj(row, column, cellValue, index) {
......
}
此时缩略效果也能正常展示,但是如果要使用空格占位符就不行了, 会被解析成文本并在表格列中展示出来,而不是显示空格占位符。