el-table设置一排字体变色

<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版权协议,转载请附上原文出处链接和本声明。