为了账号安全,请及时绑定邮箱和手机立即绑定

iview的table组件,如何根据某一个列中的状态变换不同的字体颜色?

iview的table组件,如何根据某一个列中的状态变换不同的字体颜色?

慕盖茨4494581 2019-03-18 17:15:59
我想根据不同的状态来改变不同的颜色,该如何做,用的iview框架。每次用这些框架的时候都会被table中的一些小问题难到····
查看完整描述

4 回答

?
慕田峪9158850

TA贡献1794条经验 获得超8个赞

现在OK了。我的写法是


{

                        title: '审核状态',

                        key: 'state',

                        render:(h,params)=>{

                          let tmpStr = "";

                          if(params.row.state==0){

                            tmpStr="未通过";

                          }else if(params.row.state==1){

                            tmpStr="已通过";

                          }else{

                            tmpStr="正在审核";

                          }

                          return h('span',{

                              style:{

                                 color: (params.row.state==0)?"#ed3f14":(params.row.state==1?"#19be6b":"#2d8cf0")

                              }

                          },tmpStr)

                        }

                    }


查看完整回答
反对 回复 2019-04-02
?
慕村9548890

TA贡献1884条经验 获得超4个赞

render: (h, params) => {

                            return h('div', [

                                h('Button', {

                                    props: {

                                        type: 'success',

                                        size: 'large'

                                    },

                                    style: {

                                        marginRight: '10px'

                                    },

                                    on: {

                                        click: () => {

                                         

                                        }

                                    }

                                }, '置顶'),

                                h('Button', {

                                    props: {

                                        type: 'warning',

                                        size: 'large'

                                    },

                                    style: {

                                        marginRight: '10px'

                                    },

                                    on: {

                                        click: () => {

                                           

                                        }

                                    }

                                }, '编辑'),

                                h('Button', {

                                    props: {

                                        type: 'error',

                                        size: 'large'

                                    },

                                    style: {

                                        marginRight: '10px'

                                    },

                                    on: {

                                        click: () => {

                                            

                                        }

                                    }

                                }, '结束活动'),

                            ]);

                        }


查看完整回答
反对 回复 2019-04-02
  • 4 回答
  • 0 关注
  • 4114 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号