vue结合ELEMENTUI表格需求问题


需求:根据不同审核状态用不同颜色来区分文字颜色并且鼠标移入展示当前行数据的审核进度(只是记录自己使用中觉得值得保留的思路,不喜勿喷)

<el-table-column label="申请状态 " width="250" style="cursor: pointer;">
       <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="250">
                //进度条
		<el-steps :active="2" align-center>
		    <el-step title="资料审核" style="font-size: 12px;"></el-step>
	            <el-step title="付费开通"></el-step>
		    <el-step title="申请成功"></el-step>
	        </el-steps>
                //表格数据(:class绑定所需对应颜色值,以逗号隔开)
		<div slot="reference" class="name-wrapper">
		    <span v-bind:class="{fontColor:(scope.row.state==0),fontSuccessColor:(scope.row.state==1),point:(scope.row.state!==1 || scope.row.state!==0)}" >
		        {{ scope.row.stateStr }}
		    </span>
				            	
		</div>
	    </el-popover>
	</template>
   </el-table-column>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值