vue根据表格字段不同的状态显示不同的颜色。

在业务场景中,为了区分表格中的严重等级和问题状态,使用Vue结合div循环实现了根据后台数据动态显示不同颜色的功能。在不加状态前的基础上,通过在computed属性中设置条件,实现了对后台返回字段的正确匹配和颜色区分。最终达到数据滚动时,表格各状态鲜明易辨的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

业务需求:根据后台返回的数据,对表格中的严重等级和问题状态做一下颜色区分。数据很大,大概一年左右的数据,在二级弹窗中,数据滚动的形式。

大家好,我是孙叫兽 

不加状态前:

 我这个使用vue+div循环的实现,很便捷,使用element ui也是可以的。

然后再computed:{}中添加如下代码。返回的字段是后台返回对应的字段,不要搞错了。

	activation() {              
		return (severity) => { // 使用JavaScript闭包,进行传值操作
			console.log("颜色",severity)
			
	
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

麦田上的字节

打赏不会怀孕

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值