关于element ui 表格中的常见特殊属性说明
更新时间：2022年08月09日 15:35:35 作者：曾经的你d
这篇文章主要介绍了关于element ui 表格中的常见特殊属性说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
element ui 表格的常见特殊属性 1，表格内容太多用...表示2，修改element ui自带的样式3，修改奇数行背景色4，给表头添加背景色及文字样式5，表头文字竖向排列(文字带括号)6，表头边框与文本边框对不齐情况7，导航栏的侧边栏只展开一个下拉菜单8，表格表头和内容居中显示9，添加表格背景色10，鼠标移入表格高亮显示当前行
1，表格内容太多用…表示
有时候表格内容太多一行显示不下，但是又不想换行，换行影响表格美观程度。
解决：在每一行中加：show-overflow-tooltip
效果图：
代码：
普通css样式的…
white-space:nowrap;//不换行 overflow: hidden;//超出隐藏 text-overflow: ellipsis;//变成...
2，修改element ui自带的样式
有时候element ui自带的样式不符合我们的要求，就需要去手动修改，在vue 的less中直接修改是修改不成功的。
解决：在需要修改的类前加一个 /deep/
代码：
3，修改奇数行背景色
代码：
/deep/ .el-table--enable-row-transition .el-table__body td { background： red; }
效果图：
4，给表头添加背景色及文字样式
代码：
：header-cell-style="{background：'#DDDEE0'，color：'#52545A'}"5，表头文字竖向排列(文字带括号)
给没列一个固定宽度，再设置一个字间距即可
<el-table-column prop="dh" align="center" label="电话" width="105"></el-table-column>
/deep/ .el-table thead.is-group th{
letter-spacing: 16px;
text-align: center;
}
效果图：
拓展：表格中的左右括号会显示不出来，需要用上下括号：︵ 起 ︶，起字左右都有一个空格。
6，表头边框与文本边框对不齐情况
问题：
解决：
方法：
在全局中(app.vue)加下面这段代码即可，表示所有的页面中的表格都可以作用的到，在单个页面中加就只能在当前页面可以使用。
body .el-table th.gutter {
display: table-cell !important
}
7，导航栏的侧边栏只展开一个下拉菜单
只展开一个下拉菜单，其余收缩。
在菜单头部加：unique-opened
8，表格表头和内容居中显示
//表格居中
/deep/.el-table td,/deep/.el-table th{
text-align: center;
}
9，添加表格背景色
<el-table :header-cell-style="headClass"></el-table>
// 表格标题
headClass() {
return 'background:#bbdaf9;font-weight:normal;color:#000;'
},
10，鼠标移入表格高亮显示当前行
// 鼠标移入表格
/deep/ .el-table--enable-row-hover {
.el-table__body tr:hover > td {
background: #FFC000;
color: #fff;
}
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue :style设置背景图片方式backgroundImage
这篇文章主要介绍了vue :style设置背景图片方式backgroundImage,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
前端项目vue3/React如何使用pako库解压缩后端返回gzip数据
pako是一个流行的JS库,用于在浏览器中进行数据压缩和解压缩操作,它提供了对常见的压缩算法的实现,使开发者能够在客户端上轻松进行数据压缩和解压缩,这篇文章主要介绍了前端项目vue3/React使用pako库解压缩后端返回gzip数据,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了vue如何导出json数据为excel表格并保存到本地问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要为大家详细介绍了vue+elementUI组件table实现前端分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
这篇文章主要介绍了详解vue-cli3多页应用改造，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
这篇文章主要介绍了Vue项目自动转换 px 为 rem的实现方法，本文是通过一系列的配置后，转换成热门，具体内容详情大家跟随小编一起通过本文学习吧2018-10-10
vue是一套用于构建用户界面的渐进式框架，本文通过实例给大家介绍了vue入门教程适用小白初学者，非常不错，具有参考借鉴价值，需要的朋友参考下吧2018-04-04
vue前端获取/切换麦克风、播放采集音频和采集音量大小完整代码
这篇文章主要给大家介绍了关于vue前端获取/切换麦克风、播放采集音频和采集音量大小的相关资料,文中通过图文以及代码介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下2023-12-12
vue-infinite-loading2.0 中文文档详解
本篇文章主要介绍了vue-infinite-loading2.0 中文文档详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要为大家详细介绍了Vue实现动态显示textarea剩余文字数量，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
最新评论