1.表格文字超出部分省略号显示。在表格的样式中添加CSS样式,如下,可直接粘贴:
.table1 ::v-deep .el-table__body-wrapper .cell {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// 这是头部文字溢出显示省略号
.table1 /deep/ .el-table th > .cell {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
2.鼠标悬停单元格出现提示(第一种方法)
show-overflow-tooltip
属性设置为true
来启用文本溢出时的提示效果,
tooltip-effect
属性为'dark'
或'light'
来指定信息提示的样式,默认黑色,可不写此句这样当鼠标悬停在省略的文字上时,会显示完整的信息提示。
<el-table-column
prop="name"
label="姓名"
show-overflow-tooltip
:tooltip-effect="'dark'"
>
</el-table-column>
2.鼠标悬停单元格出现提示(第二种方法)
使用
Element UI 的工具提示组件<el-tooltip>
,用于在鼠标悬停时显示提示框。通过:content
属性,将提示框的内容设置为当前行的name
属性的值。placement="top"
:这是工具提示的位置,设置为 "top" 表示在鼠标悬停时在上方显示提示框。<div>{{ scope.row.name }}</div>//在提示框中显示的文本内容
<el-table-column prop="name" label="名字" width="180">
<template slot-scope="scope">
<el-tooltip :content="scope.row.name" placement="top">
<div>{{ scope.row.name }}</div>
</el-tooltip>
</template>
</el-table-column>