Vue+Element中的表格根据属性值来渲染不同的样式

//两种状态的判断
<el-table-column label="当前"
   prop="status">
    <template slot-scope="scope">
        <span :style="{ color: scope.row.status === 1 ? '#cccccc' : '#ED3F14' }">{{ scope.row.status === 1 ? '男' : '女' }}</span>
    </template>
</el-table-column>

 

//三种状态的判断
<el-table-column 
    label="当前" 
    prop="status"
    >
    <template slot-scope="scope">
        <span :style="{ color: scope.row.status === 0 ? '#ff':scope.row.status === 1 ? '#cccccc' : '#ED3F14' }">{{ scope.row.status == 0 ? '已过期':scope.row.status === 1 ? '授权' : '未授权' }}</span>
    </template>
</el-table-column>

 


版权声明:本文为Swampis原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。