使用VUE,ELement UI组件中的el-table组件,想要根据从后台拿到的数据改变行样式,效果如下:
HTML代码如下:
<template>
<el-table
:data="log"
style="width: 100%;">
<el-table-column
prop="time"
label="时间"
width="180">
<template slot-scope="scope">
<div :class="scope.row.status? 'success':'fail'">{{scope.row.time}}</div>
</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名">
<template slot-scope="scope">
<div :class="scope.row.status? 'success':'fail'">{{scope.row.name}}</div>
</template>
</el-table-column>
<el-table-column
prop="status"
label="状态">
<template slot-scope="scope">
<div :class="scope.row.status? 'success':'fail'">{{scope.row.status}}</div>
</template>
</el-table-column>
</el-table>
</template>
<style lang="stylus" scoped>
.success
color:''
.fail
color:red
</style>
即对每一个table项进行判断,达到改变整行样式的效果