一、el-table内容较多时隐藏，hover时换行显示

1.在需要隐藏的列el-table-column中加上属性 :show-overflow-tooltip="true"

实现内容较多时隐藏,hover时显示。

也换行了，但是换的太丑了@——@

<el-table-columnprop="replacereason"label="更改原因":show-overflow-tooltip="true"></el-table-column>

2.在<style></style>标签中添加样式

实现hover时多余的内容换行显示，自定义换行的宽度

注：必须写在全局样式中——和下面一样就可以（不能在style后面加上scoped,否则样式不生效）

  <style>.el-tooltip__popper{max-width:10%}</style>

3.这个下拉框还是很丑，修改提示框样式。

在el-table中添加属性 :tooltip-effect=" 'xxx'"

xxx给提示框添加了一个类名 is-xxx ，下面设置了tooltip-effect=" 'tooltipStyle' "，并添加了

is-tooltipStyle这个类设置提示框样式

 <el-table:data="tableData":max-height="'753'":tooltip-effect="'tooltipStyle'"><el-table-columnprop="replacereason"label="更改原因":show-overflow-tooltip="true"></el-table-column>
</el-table>

.is-tooltipStyle {background: #fff;color: #3759af;border: 1px solid rgb(158, 157, 157);font-size: 15px;
}

最终效果：

注：那个小箭头的样式不知道怎么改，如有朋友知道，欢迎评论，非常感谢！

--------------------------------------------------------------------------------------------------------------------------------

2023/03/18更新

4.我知道小箭头的修改方式了！！！！！！

这个小箭头竟然是用border做的，小箭头显示在文字下方时,设置border-bottom-color就可以；

小箭头显示在文字上方时,设置border-top-color就可以

  .is-tooltipStyle[x-placement^=bottom] .popper__arrow, .is-tooltipStyle[x-placement^=bottom] .popper__arrow::after{border-bottom-color: pink !important;}.is-tooltipStyle[x-placement^=top] .popper__arrow, .is-tooltipStyle[x-placement^=top] .popper__arrow::after{border-top-color: pink!important;}

二、总结

1.对于样式，可以先尝试在浏览器中找到看看是否可以修改。

2.接口传参不会的时候，可以看看别人是怎么传的。

3.不要一来就百度，百度出的结果很可能不是你想要的。

4.完结了，撒花！！！！！！

el-table单元格内容较多时隐藏，鼠标hover时显示并且显示的内容可以换行 el-table提示框样式优化相关推荐

php td内容换行,table单元格内容过多换行显示
节目名称所属电视台版本开始时间结束时间获取时间操作 [#if list][#list list.items as t] ${t.program}${t.channelName}${t.__v}${t. ...
css表格强制不换行符,css控制table单元格强制换行与强制不换行
css 我们先看一下css手册中,对于list-style地解释: 定义和用法 list-style 简写属性在一个声明中设置所有地列表属性. 说明该属性是一个简写属性,涵盖了所有其他列表样式属性. ...
Element Table 单元格中嵌套表格（Table）合并行效果
在Element中实现表格合并行功能一般是通过自定义span-method方法,此方法要求表格数据源中需要合并行的单元格中数据相同,根据相同数据来实现合并算法. 本例通过在父Table单元格中嵌套子T ...
html中表格实现在页面居中显示,table居中显示 css table 单元格居中
怎么用css 让整个table位置页面水平居中, 在百度上找了半天发现没一个能用的需要准备的材料分别有:电脑.chrome浏览器.html编辑器. 首先,打开html编辑器,新建一个html文件, ...
layui table 单元格内文字、元素块实现优美的换行显示
关于layui table 单元格内内容的换行显示,包括文字.元素块等.网上也提供了一些解决方案,博主也尝试过这些解决方法,但都不尽善美.于是决定好好研究一下这里面的样式问题. 一.网上现有的解决方法 ...
html表格数据点击事件,如何在iview的table单元格里实现点击事件？
需求是这样的,我需要做一个表格,表头和内容全都是动态的. 从服务器端获取到数据后,最后拼装成一个二维数组slotTableData,里面的内容是自 iview 2.3 支持的 html.这样就可以在界 ...
IVIEW组件中Table单元格可编辑、加入各种图表
后端项目地址:https://gitee.com/wlovet/table-server 前端项目地址:https://gitee.com/wlovet/table-project 一.Render函 ...
Vue.js 根据数据，进行Table单元格合并
Vue.js 根据数据,进行Table单元格合并 ITKouSyou 2018-10-16 14:29:40 3493 收藏 2 展开表格代码 <table cellspacing=&q ...
css td 强制换行,CSS控制Table单元格强制换行与强制不换行
我们知道Div的换行和不换行的css写法.但对于表格单元格只知道一个属性nowrap可以使其不换行.近日有此需要,但发现加上nowrap在某些情况下还是会换行!无奈,没有一个强制不换行的方法吗? 用C ...

el-table单元格内容较多时隐藏，鼠标hover时显示并且显示的内容可以换行 el-table提示框样式优化

一、el-table内容较多时隐藏，hover时换行显示

二、总结

el-table单元格内容较多时隐藏，鼠标hover时显示并且显示的内容可以换行 el-table提示框样式优化相关推荐

最新文章

热门文章