目录1，表格内容太多用…表示2，修改element ui自带的样式3，修改奇数行背景色4，给表头添加背景色及文字样式5，表头文字竖向排列(文字带括号) 6，表头边框与文本边框对不齐情况7，导航栏的侧边栏只展开一个下拉菜单8，表格表头和内容居中显示9，添加表格背景色10，鼠标移入表格高亮显示当前行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，表头文字竖向排列(文字带括号)给没列一个固定宽度，再设置一个字间距即可/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，添加表格背景色 10，鼠标移入表格高亮显示当前行// 鼠标移入表格/deep/ .el-table--enable-row-hover {.el-table__body tr:hover > td {background: #FFC000;color: #fff;}}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:vue基础之ElementUI表格详解Element-UI中关于table表格的那些骚操作(小结) vue基础之详解ElementUI的表单Vue elementUI表单嵌套表格并对每行进行校验详解