Vue2:el-table中的笔墨根据内容改变颜色

打印 上一主题 下一主题

主题 1029|帖子 1029|积分 3087

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

x
想要实现的效果如图,【级别】和【P】列的颜色根据笔墨内容变革

1、正常创建表格
  1. <template>
  2.     <el-table
  3.       :data="tableData"
  4.       style="width: 100%">
  5.       <el-table-column prop="id" label="ID"/>      
  6.       <el-table-column prop="subject" label="Bug标题"/>      
  7.       <el-table-column prop="severity" label="级别"/>      
  8.     </el-table>
  9.   </template>
复制代码
2、添加作用域插槽
在el-table-column中定义一个作用域插槽,在作用域插槽中,可以通过scope对象来访问el-table列中的数据,并利用:style绑定内联样式来设置笔墨颜色。
[code][/code]
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

惊雷无声

论坛元老
这个人很懒什么都没写!
快速回复 返回顶部 返回列表