レンダリングの効果の説明:
10語を超えるタイトルのみがel-tooltipを表示し、
10語を超えないタイトルは表示されません。アイデア:表のデータは10語を超え、表示と非表示、ホバー効果を使用します。 el-tooltipを表示し、すべてのテキストコードを表示するには
:
<el-table-column label="标题" width="180">
<template slot-scope="scope">
<el-tooltip
class="item"
effect="dark"
:content="scope.row.title"
placement="bottom"
popper-class="tips"
>
<span v-if="scope.row.title.length >= 10">{
{
scope.row.title
}}</span>
</el-tooltip>
<span v-if="scope.row.title.length < 10">{
{
scope.row.title
}}</span>
</template>
</el-table-column>
/deep/.el-table td {
border-bottom: 1px solid #2E2C3D;
background: #242133;
.cell span {
display: block;
width: 10em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
**ヒント:**要件に応じて、セルスタイルのem単位を幅に変更することでも実現できます。