element-ui中 修改table表格隔行变色的样式

最新推荐文章于 2023-05-06 10:51:11 发布
VIP文章 最新推荐文章于 2023-05-06 10:51:11 发布
阅读量2.1k 收藏 8
点赞数 3
分类专栏： Element-Ui组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hong521520/article/details/118528138
版权

在这里插入图片描述

 /deep/ .el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped
    td {
   
      background-color: #233347; /*隔行变色*/
    }

另一个色值设置在html上一定得加上stripe属性,否则不生效

 <el-table
            :data</
最低0.47元/天 解锁文章
一个橙子呀
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
wl-tree-table:a tree table based on vue and element-ui，一个基于vue和element-ui的树形表格
05-11
el-tree-table 简介 el-tree-table组件基于vue和element-ui，在 的实现基础上增加一些新特性。 并在此声明treetable的业务实现再来上述开源项目，如有冒犯，请及时联系。 共同依据element-ui的写成。 扩展主要包括：显示边框、固定高度、显示复选框、复选框选中是否遵循父子关联、复选框禁用条件。 - 这里有一个兄弟组件-树形穿梭框： - 快速上手 npm i @weilan/el-tree-table --save 或 npm i @weilan/el-tree-table -S import TreeTable from '@weilan/el-tree-table' Vue.use(TreeTable) 示例 <treeTable :data="tree_table" :columns="columns" checkBox expandAl
element 表格自定义斑马纹颜色
qq_61211119的博客
09-28 6274
element自定义斑马纹颜色
element-ui 中的table的列隐藏问题解决
12-12
element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的。之前用bootstrap做的表格，想要实现简短列和详细列的切换。因为详细列实在有太多列了，拉动滚动条还有一段距离。所以希望能够切换到简短列可以方便的看见比较重要的几列的内容。用之前的方法的话，非常简单，直接设置display的显示和隐藏就可以了。 但是放在element-ui中来就不可行了。每一列根本不能直接设置样式，你给每一列设置class-name从而设置样式的话，可能也许会存在一点问题。。因为每一列的class-name的样式是包裹在cell样式中的，比如说当你想要在
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
10-17
主要介绍了Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
element table 行高列宽拖拽调整
a1361742209的博客
03-17 1248
element table 行高列宽拖拽调整
Element UI表格隔行变色
qq_44158162的博客
12-01 7179
表格隔行变色有两种方式 第一种，我们给表格设置“stripe”属性 <el-table :data="tableWarningData" style="width: 100%" :header-cell-style="{ color: '#1572e9' }" stripe :cell-style="changeCellStyle"> 然后在style里面写下如下代码 .el..
element table组件实现斑马线效果
qq_30907143的博客
03-06 1525
element table组件实现斑马线效果,表格颜色交错效果实现。
传入el-table的数据结构
ZQH084811的博客
09-19 749
表格展示 <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="n
el-table stripe 双重表格时，斑马纹颜色错乱
Yuoliku的博客
09-02 3257
在开发过程中遇到了这样一个问题，给表格组件加上了斑马纹，初看显示正常，但是但点击，斑马纹中的单元格，弹出另一个表格的时候发现界面效果变的很奇怪，如草图 正常显示效果，应为弹窗内表格亦是斑马纹，但是现在单击深色那一行出现的全部变成了同一个颜色，外层底色为白色的弹窗内表格显示正常。遇到这个一时之间还没想到是为啥会出现这种状态 然后就开始看css样式，乍一看还挺正常，隔行存在一个–striped class 继续往外层走 发现是因为外层表格的 tr 也带了–striped class,即使弹窗内表格 tr没
el-table表格循环升级版
weixin_44042792的博客
01-20 537
<template> <div :style="{ width: width, marginTop: marginTop, marginRight: marginRight, marginBottom: marginBottom, marginLeft: marginLeft, }" > <el-table :stripe="stripe" ...
Element-UI中关于table表格的那些骚操作(小结)
10-16
主要介绍了Element-UI中关于table表格的那些骚操作(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
elementui设置隔行变色
simple_T的博客
03-31 2267
.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td { background-color: #fff; /*替换为你需要的颜色，觉得优先级不够就加!important*/ } 使用的时候注意table的:stripe=“...
【element-ui修改表格样式】项目中常用修改el-table的样式
qq_44971635的博客
05-06 1488
使用element-ui框架时候常用修改el-table的样式，表格背景表头行业样式，悬浮效果
Element ui表格隔行变色
热门推荐
unimpossibles的博客
04-28 1万+
官方文档给出一个stripe属性可以创建带斑马纹的表格 <el-table :stripe="true"> </el-table> //可以这样写 <el-table stripe"> </el-table> //可以直接这样写 这样创建出来的表格也有隔行效果但是不明显。 官方文档还给出了带状态的表格，通过row-class-name 属性来创建...
element全局table  隔行换色
u011155153的专栏
05-25 1759
/*用来设置当前页面element全局table隔行换色*/ .el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td{ background-color:#ebeef5;/*替换为你需要的颜色，觉得优先级不够就加!important*/ } ...
【表格合并与底纹】vue-elementul表格简单实现合并单元格，与列和行给底纹颜色
seeeeeeeeeee的博客
12-23 1074
这是一个很常见的需求啊，因为很多公司都会涉及到写表格展示数据那么在某些公司内就会出现为了让数据更直观的感受到而让你给某些行和列用颜色标出来。使得看起来更方便那么这里就汇总一下常用的横竖合并以及横竖颜色底纹如何实现。
[element-ui] 修改table表格隔行变色 背景颜色透明 改hover颜色
qq_14993591的博客
03-24 3138
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{ background: #212936; /*隔行变色*/ } element-ui中 修改table表格隔行变色的样式
element-ui的table表格隔行换色
JackieDYH的博客
09-08 3414
<el-table :data="tableData" :header-cell-style="tableHeaderColor"//头部变色 style="width: 100%" :row-class-name="tableRowClassName"//隔行换色 > <el-table-column align='center' label="日期" width="60"> .
element UI表格控制列行合并以及表格背景色控制
qq_40390762的博客
10-27 1203
vue - element - table
element-ui中关于table表格的那些骚操作(小结
最新发布
09-08
element-ui是一套基于Vue.js的UI框架，其中的table表格组件提供了许多强大的功能和骚操作。 首先，element-ui的table表格支持对数据进行排序操作。只需设置column的sortable属性为true，即可实现对某一列数据的升降序排列，方便用户快速找到所需的信息。 其次，table表格还支持对数据进行筛选操作。通过设置filters属性，可以在表头中显示可选的筛选项，用户可以选择自己需要的筛选条件，从而快速过滤数据，提高表格的可读性和实用性。 此外，element-ui的table表格还支持分页功能。通过设置pagination属性，可以实现表格数据的分页展示，方便用户浏览大量数据，同时也可以通过自定义分页器的样式和布局，满足不同项目的需求。 另外，table表格还提供了自定义列模板的功能。通过设置scoped slot，可以自定义表格中每一列的展示方式，包括渲染不同的DOM元素、添加操作按钮等，非常灵活。 此外，element-ui的table表格还提供了可编辑的功能。通过设置column的editable属性为true，可以实现编辑表格数据的功能，用户可以直接在表格中进行数据的修改，提高数据的编辑效率。 最后，element-ui的table表格还支持表格数据的导出和导入。通过设置导出按钮和导入事件，可以方便地将表格数据导出为Excel或导入Excel数据到表格中，提高了数据的共享和交互性。 综上所述，element-ui中关于table表格的这些骚操作，使得我们可以更方便地对表格数据进行排序、筛选、分页、自定义列模板、编辑、导出和导入等操作，提高了表格的可读性、编辑效率和交互性，满足了不同项目的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值