el-table表格中el-tooltip的使用
时间: 2025-01-13 09:54:10 浏览: 33
使用 el-tooltip
实现 el-table
单元格内容超出显示提示
在使用 Element Plus 组件库中的 el-table
时,可以通过配置 show-overflow-tooltip
属性来简化处理单元格内文字溢出的情况。然而,如果希望自定义工具提示的内容或样式,则可以采用手动方式集成 el-tooltip
。
方法一:利用内置属性 show-overflow-tooltip
最简便的方法是直接应用此布尔型属性于 <el-table-column>
标签上:
<el-table :data="tableData">
<el-table-column prop="name" label="姓名" width="180" show-overflow-tooltip></el-table-column>
</el-table>
这种方法适用于大多数场景,并能自动检测到文本溢出并提供默认样式的浮动层[^2]。
方法二:嵌套 el-tooltip
自定义提示框
为了获得更灵活的控制权,可以在列模板内部包裹一层 el-tooltip
来替代上述方法。这种方式允许指定更多参数如位置、延迟时间等特性:
<template v-for="(item, index) in tableData" :key="index">
<el-tooltip effect="dark" placement="top-start">
<!-- slot-scope 已被弃用 -->
<template #content>{{ item.address }}</template>
<div style="width: 150px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
{{ item.address }}
</div>
</el-tooltip>
</template>
<!-- 或者 -->
<el-table-column label="地址" min-width="200">
<template #default="scope">
<el-tooltip class="box-item" effect="light" content="Top Left prompt info" placement="bottom">
<span style="display:block;width:150px;height:20px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ scope.row.address }}</span>
</el-tooltip>
</template>
</el-table-column>
这里展示了两种不同的布局模式——一种是在循环体外创建全局性的提示器;另一种则针对特定字段定制局部作用域内的提示效果。注意调整 CSS 样式以适应实际需求[^1]。