element ui 表格常见特殊的属性

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;
  }
}

最后:如果此篇博文对您有帮助,还请点点关注点点赞呐~,谢谢 ~ ~

评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

杨同学*

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值