Iview表格不同色块区别显示

    组件一般自带斑马纹和色块,但是有些需求就会要求同一个表格有不同的色块显示,同时不同色块的斑马纹和字体也不一样。
   该博客就是针对iview组件库的表格的。

   先贴展示图,
   ![效果图](https://www.icode9.com/i/ll/?i=2020120115482866.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhY2tlckRyZWFtZXJfQlNE,size_16,color_FFFFFF,t_70)
  不同色块,不同斑马纹,不同字体。

 首先是表头部分,通过在iview表格的列属性内,添加className属性,绑定相应的类名,在下面使用对应的方法,
 
 ![在这里插入图片描述](https://www.icode9.com/i/ll/?i=20201201154941687.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhY2tlckRyZWFtZXJfQlNE,size_16,color_FFFFFF,t_70)

 而斑马纹部分,使用的是render方式渲染的,字体也是。
 ![在这里插入图片描述](https://www.icode9.com/i/ll/?i=20201201155123627.png)
 
 再在对应的地方写上css样式
 ![在这里插入图片描述](https://www.icode9.com/i/ll/?i=20201201155210802.png)
 
 这样就可以实现了。
上一篇:2020-12-18


下一篇:JVM