组件一般自带斑马纹和色块,但是有些需求就会要求同一个表格有不同的色块显示,同时不同色块的斑马纹和字体也不一样。
该博客就是针对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)
这样就可以实现了。