eltable 文字放不下_element-UI table文字超出两行,隐藏多余文字,移入显示tips

element-UI表格的列属性

通过设置 :show-overflow-tooltip=“true” 这个属性可以达成超出一行的文字用省略号替代,并带有移入时tips显示全部内容的需求。但是如果想要文本超出两行、三行的需求,显然设置这个属性是无法完成的。

超出两行隐藏多余文本,移入时tips显示全部内容

我们想完成的是超出两行才用省略号隐藏多余文本,并且移入才会有tips显示;两行以内的文本则不隐藏也不显示tips。

超出的文本的隐藏

.myNote{

display:-webkit-box;

text-overflow:ellipsis;

overflow:hidden;

-webkit-line-clamp: 2;

-webkit-box-orient:vertical;

}

文本超过两行,移入时tips显示全部内容

placement="top"

v-model="scope.row.showTooltip"

:open-delay="500"

effect="dark"

:disabled="!scope.row.showTooltip">

{{scope.row.note}}
{{scope.row.note}}

注意! 显示悬浮提示时v-model 和 disabled属性要一起使用才有效果。

showTips(obj, row){

/*obj为鼠标移入时的事件对象*/

/*width为文本在页面中所占的宽度,创建标签,加入到页面,获取width,最后在移除*/

let TemporaryTag = document.createElement('span');

TemporaryTag.innerText = row.note;

TemporaryTag.className = 'getTextWidth';

document.querySelector('body').appendChild(TemporaryTag);

let currentWidth = document.querySelector('.getTextWidth').offsetWidth;

document.querySelector('.getTextWidth').remove();

/*cellWidth为表格容器的宽度*/

const cellWidth = obj.target.offsetWidth

/*当文本宽度小于||等于容器宽度两倍时,代表文本显示未超过两行*/

currentWidth <= (2*cellWidth) ? row.showTooltip = false : row.showTooltip = true

}

通过长度判断

一开始我是想通过表格高度去判断,但是后来发现,高度不是一个固定不变的值,会随着移入移出变化,并且其他列的高度超出也会影响到一整行的高度。所以最后还是通过文本宽度来判断,把文本宽度与容器宽度比较,这样得到的值才是固定不变的。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要修改 Element UI 表格组件的样式,可以使用自定义样式类和覆盖默认样式。以下是一些基本的步骤: 1. 在 Vue 组件中引入 Element UI 表格组件。 ```javascript <template> <el-table :data="tableData"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> </el-table> </template> <script> import { ElTable, ElTableColumn } from 'element-ui'; export default { components: { ElTable, ElTableColumn, }, data() { return { tableData: [ { name: 'John Doe', age: 30, address: '123 Main St', }, // ... ], }; }, }; </script> ``` 2. 在组件中定义自定义样式类。 ```css .table-wrapper { border: 1px solid #ccc; } .el-table__header { background-color: #f5f5f5; } .el-table__body { background-color: #fff; } ``` 3. 将自定义样式类应用于表格组件。 ```javascript <template> <div class="table-wrapper"> <el-table :data="tableData" class="my-table"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> </el-table> </div> </template> <style> .my-table { width: 100%; } .el-table__header { background-color: #f5f5f5; } .el-table__body { background-color: #fff; } </style> ``` 在上面的示例中,我们在 `div` 元素上应用了 `.table-wrapper` 样式类,并在表格组件上应用了 `.my-table` 样式类。然后,我们覆盖了表格组件的默认样式,例如表头和表体的背景颜色。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值