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>


猜你喜欢

转载自blog.csdn.net/Hkweb_/article/details/80885314