一招教你自定义elementui中表格斑马线
element作为一款基于vue.js的组件库,组件可谓丰富切强大,在vue项目中展示多条数据时,经常会用到el-table组件,为了使页面更加的美观,ui设计时往往会在页面上给table加上斑马线,当然这都不是问题,毕竟el-table有stripe属性。江stripe属性设置为true,就能给表格加上斑马线。这个时候产品说话了,你这个斑马线太丑了,换一个颜色,我。。。。。。。没办法只能再想办法
element作为一款基于vue.js的组件库,组件可谓丰富切强大,在vue项目中展示多条数据时,经常会用到el-table组件,为了使页面更加的美观,ui设计时往往会在页面上给table加上斑马线,当然这都不是问题,毕竟el-table有stripe属性。江stripe属性设置为true,就能给表格加上斑马线。
这个时候产品说话了,你这个斑马线太丑了,换一个颜色,我。。。。。。。没办法只能再想办法呗,查看官方文档你会发现我们可以自定义表格行的class名称,在Table Attributes里可以找到row-class-name,通过这个属性我们就可以实现自定义表格斑马线。
1.首先我们在el-table中添加属性,为表格行添加className
:row-class-name="tableRowClassName"
2.js中加入
tableRowClassName({ rowIndex }) {
if (rowIndex % 2 === 0) {
return "warning-row";
} else if (rowIndex % 2 === 1) {
return "success-row";
}
return "";
}
此部分为表格的单双行设置不同的className。
3.css中为warning-row与success-row设置不同的背景颜色,当然了 你也可以不只设置背景颜色,
.warning-row {
background: #142e51;
}
.success-row {
background: #011e47;
}
这样el-table自定义表格斑马线就完成了,注意这里的css不要写在带scoped的style里,scoped限制style里的样式只在当前组件生效,el-table是我们在当前组件引入element的组件,所以样式并不会生效。解决办法。另写一个style里去写上面代码,或者在elementui全局样式里去自定义整个项目的表格斑马线
更多推荐
所有评论(0)