iview的表格自定义_iview table表格的自定义样式

iview table表格的自定义样式

1.需求

背景颜色为深色背景

左侧可勾选checkbox

选中鼠标hover浮动到某行，当前行背景颜色更换为红色

斑马条纹

效果图

2.设计

iview的官方文档已经给出了解决方案

选中高亮=》highlight-row

斑马条纹=》stripe

表格自带浮动到某行变色

checkbox=》selection

:row-class-name="rowClassName" :columns="columns4" :data="data1" highlight-row>

3.实践

首先将背景颜色换掉，发现根本换不掉啊有木有，看官方给的例子中，是在类选择器后面 跟上一个td这样换的 类似

/*底色*/

.ivu-table td{

background-color: #182328;

color: #fff;

}

背景换完，头部的th没有换掉 那就再来一个

/*头部th*/

.ivu-table-header th{

color:#FFD3B4;

font-weight: bold;

background-color: #212c31;

border: none;

}

背景ok了，接下来斑马颜色，这个我是直接用样式真的改不掉。看到官方的例子中有类似的方案

那就简单了，上面Table标签的:row-class-name="rowClassName"就是在这个地方用，定义样式

/*偶数行*/

.ivu-table-stripe-even td{

background-color: #434343!important;

}

/*奇数行*/

.ivu-table-stripe-odd td{

background-color: #282828!important;

}

接下来定义rowClassName方法

rowClassName :function (row, index) {

if(index%2==0){

return 'ivu-table-stripe-even';

}

else return 'ivu-table-stripe-odd';

}

一顿操作之后：

发现我靠好像把把鼠标浮动到某行的样式给覆盖没了，反正要换色，自己就改一下吧

/*浮在某行*/

.ivu-table-row-hover td {

backgroun