Element UI 表格 el-table-column根据不同值显示不同颜色
<template> <div> <div :class="[flag ? 'red' : 'blue']">Hello,Vue!</div> <div :class="{show:true}">Hello,Vue!</div> <el-table :data="tableData" border id="printContainer"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="happy" label="爱好"></el-table-column> <el-table-column prop="status" label="状态"> <template slot-scope="scope"> <div v-if="scope.row.status == 0" :style="{'color':scope.row.status==1? 'red':'blue'}"> {{scope.row.status == 0 ? '未完成' : ' 已完成'}} </div> </template> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { flag: true, tableData: [ { name: "王小虎", happy: "王小卤虎皮凤爪", status: 0 }, { name: "王小虎", happy: "王小卤虎皮凤爪", status: 1 }, { name: "王小虎", happy: "王小卤虎皮凤爪", status: 0 }, { name: "王小虎", happy: "王小卤虎皮凤爪", status: 1 } ] };<template> <div> <div :class="[flag ? 'red' : 'blue']">Hello,Vue!</div> <div :class="{show:true}">Hello,Vue!</div> <el-table :data="tableData" border id="printContainer"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="happy" label="爱好"></el-table-column> <el-table-column prop="status" label="状态"> <template slot-scope="scope"> <div v-if="scope.row.status == 0" :style="{'color':scope.row.status==1? 'red':'blue'}"> {{scope.row.status == 0 ? '未完成' : ' 已完成'}} </div> </template> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { flag: true, tableData: [ { name: "王小虎", happy: "王小卤虎皮凤爪", status: 0 }, { name: "王小虎", happy: "王小卤虎皮凤爪", status: 1 }, { name: "王小虎", happy: "王小卤虎皮凤爪", status: 0 }, { name: "王小虎", happy: "王小卤虎皮凤爪", status: 1 } ] }; } }; </script> <style scoped> .red { color: red; } .blue { color: blue; } .show { color: blue; } </style> } }; </script> <style scoped> .red { color: red; } .blue { color: blue; } .show { color: blue; } </style>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 按钮权限的设计及实现