<div>
<el-table ref='mytable' :data='dataList' :row-class-name='rowClassName'>
<el-table-column type='selection'></el-table-column>
<el-table-column type='index' label='序号'></el-table-column>
<el-table-column v-for=(item,index) in tableHead :label='item.label' :prop='item.prop'></el-table-column>
</el-table>
</div>
methods:{
rowClassName(row,rowIndex,column,columnIndex){
if(rowIndex%2==0){
return '{backgroundColor:'red'}'
}else{
return '{backgroundColor:'blue'}'
}
return:'';
}
}
//以上是官方文档可以设置表格背景色变色,但是也会遇到要求一行的字体变色的。用最笨的方法,把每一个单元格的字体变色
//下面的ceshi表示一行(排)数据的某一个字段的值
<div>
<el-table ref='mytable' :data='dataList'>
<el-table-column label='id' prop='id'>
<template slot-scope='scope'>
<div :class='scope.row.name='ceshi'?'success':'fail''>{{scope.row.id}}</div></template>
</el-table-column>
<el-table-column label='name' prop='name'>
<template slot-scope='scope'>
<div :class='scope.row.name='ceshi'?'success':'fail''>{{scope.row.name}}</div></template>
</el-table-column>
</el-table>
</div>
<style>
.success{
color:red;
}
.fail{
color:blue;
}
</style>
版权声明:本文为weixin_43979503原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。