element ui 表格常见特殊的属性

element ui 表格的常见特殊属性
1,表格内容太多用...表示
2,修改element ui自带的样式
3,修改奇数行背景色
4,给表头添加背景色及文字样式
5,表头文字竖向排列(文字带括号)
6,表头边框与文本边框对不齐情况
7,导航栏的侧边栏只展开一个下拉菜单
1,表格内容太多用…表示
有时候表格内容太多一行显示不下，但是又不想换行，换行影像表格美观程度。
解决：在每一行中加：show-overflow-tooltip

效果图:
代码：

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

版权声明：本文为CSDN博主「曾经的你y」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_52539553/article/details/116145188