Element Plus的el-table表格中单元格内容过多显示省略号
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
1、el-table表格中内容超出单元格的宽度会自动换行,会使整个表格看起来显得不太美观,此时可以使用el-table-column 自带的 show-overflow-tooltip="true" 属性来设置,可以使超出单元格宽度的内容变成省略号,而且鼠标放上去会提示单元格中原本有的全部的内容,但是这种方法只能查看,无法复制完整的内容。
<el-table-column
prop="profile"
label="疾病描述"
show-overflow-tooltip="true"
min-width="90"
/>
2、如果想要实现超出单元格内容既能够显示出完整的内容,又想要能够复制全部内容,可以使用插槽,设置el-tooltip来提示,如下图所示:
<el-table-column prop="address" label="地址" min-width="100">
<template #default="scope">
//content绑定的是单元格中对应的值
<el-tooltip
:content="scope.row.address"
raw-content
placement="top-start"
v-if="scope.row.address"
>
//判断单元格中有值,并且值的长度小于等于15,显示单元格中的值
<span v-if="scope.row.address && scope.row.address.length <= 15">
{{scope.row.address}}
</span>
//如果单元格中有值,并且值得长度大于15,便使用substr截取0-15的内容显示,后面的变成省略号
<span v-if="scope.row.address&& scope.row.address.length > 15">
{{scope.row.address.substr(0, 15) + "..."}}
</span>
</el-tooltip>
<span v-else-if="scope.row.address== null"> NA </span>
</template>
</el-table-column>
3、但有时候可能因为电脑分辨率的原因,单元格中所截取的显示的内容会不太合适,也可以手动写一个css样式,来实现溢出显示省略号
:deep(table tr span.el-tooltip__trigger) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
4、此时,有提示信息,但是,提示框不换行,如果内容很多,则提示框会单行一直显示,所以,我们需要修改提示框的宽度
在全局css样式中书写如下代码:
.el-popper {
max-width: 200px !important;
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)