elementui表格隔行换色

关于elementui的表格隔行换色,我呢也是找了很多博客,但是都是死值,对于我这种后端的程序员还是怎么都看不顺眼的,对于隔行换色,应该也不算难点吧,但是让我绞尽脑汁,属于在学校的一个要求,自己写下来,怕忘掉,接下来进入正题

效果如下,

这个是我刚开始学习elementui的效果,也是vue和elementui双管齐下,以下是我复制的死代码

tableRowClassName({row, rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';}

官网的效果是这样的:

我的代码是这样的:

这个也是我试了很多,找出来的,发现了一个规律,比如这个隔行换色,表面上是白,暖色,浅绿色,

但是规律是这样的, 白暖白绿

这是四个一组,那么这个rowIndex下标是从0开始的

那么这样算下来的就是上面的效果,

如果是白暖绿

这是三个一组,那么就模3,算是第几个有颜色,以此类推

elementui表格隔行换色相关推荐

Javascript知识【案例：表格隔行换色】
目录 1,案例1:表格隔行换色 2,案例2:鼠标移入粉色,移出原色[基础+] 2.1:需求说明 2.2:前置知识:鼠标移入移出事件 2.3:前置拓展知识:this关键字 2.4:分析&实现 1 ...
使用css选择器实现表格隔行换色
使用css选择器实现表格隔行换色 <style>*{margin: 0;padding: 0;}body{padding: 200px;box-sizing: border-box;}ta ...
Vue中实现表格隔行换色效果
一.原理在 Vue 中,进行表格行的循环输出时,一般使用 v-for 指令,每次循环都能得到该行的索引 index ,用每一行的索引除以2取余,余数等于1,可以使用一种颜色作为背景色,余数等于0,可 ...
转，帅气的表格隔行换色+鼠标经过变色、点击变色
源码是: <style type="text/css"><!– #senfe { width: 650px; border-top: #E3E3E3 1px so ...
微信小程序table表格-隔行换色
wxml <view class="table"> <view class="tableTr"><view class=" ...
JQuery 表格隔行换色
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
Bootstrap3基础 table-striped 表格实现隔行换色（浅灰色与白色交替）
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
微信小程序表格实现隔行换色
微信小程序的表格样式实现隔行换色: 用三元表达式改变标签class名, 在wxss分别写不同的类名: flex-view-itemodd flex-view-itemeven <view cla ...
隔行换色并且鼠标指向行变色的表格
一应用对于一些清单型数据,通常是利用表格展示到页面中.如果数据比较多,很容易看串行.这时,可以为表格添加隔行换色并且鼠标指向行变色功能. 二代码 <script language=&quo ...

elementui表格隔行换色

elementui表格隔行换色相关推荐

最新文章

热门文章