文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

关于element ui 表格中的常见特殊属性说明

2022-11-13 14:40

关注

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯