关于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;
}
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vux-scroller实现移动端上拉加载功能过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
这篇文章主要介绍了vue对象复制方式(深拷贝,多层对象拷贝方式在后面)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue 组件通信的几种方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
这篇文章主要为大家介绍了vue前端优雅展示后端十万条数据的考点剖析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了vue cli3 实现分环境打包的步骤，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-03-03
这篇文章主要介绍了vue框架下部署上线后刷新报404问题解决方案,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
本篇文章主要介绍了利用Vue v-model实现一个自定义的表单组件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
由于在项目中需要对数据进行可视化处理,也就是用图表展示,众所周知echarts是非常强大的插件,所以这篇文章主要给大家介绍了关于vue+echarts图表使用的相关资料,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了vue移动端轻量级的轮播组件实现代码，一个简单的移动端卡片滑动轮播组件，适用于Vue2.x。本文给大家带来了实例代码，需要的朋友参考下吧2018-07-07
这篇文章主要介绍了vue引入cesium问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论