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

Question

我想根据不同的状态来改变不同的颜色，该如何做，用的iview框架。
每次用这些框架的时候都会被table中的一些小问题难到····

Answer 1

现在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)
                        }
                    }

Answer 2

列接受一个 render prop
https://iview.github.io/compo...

Answer 3

render (row, column, index) {
    return
     `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
    }

iview官网的栗子，render函数中渲染你想要的样式，不过按照你的需求是需要一个span就行 你可以在data中声明一个方法，按照你传过来的row.xx的值来返回对应的颜色，用style或者class绑定都可以
给你看一下我用element的代码，大同小异的

<template slot-scope="scope">
    <el-tag
      :type="stateTagType(scope.row.state)"
      size="mini">{{scope.row.state}}</el-tag>
  </template>

template 相当于render函数。

stateTagType(type) {
  if(type == "已发起") {
    return "warning"
  }else if(type == "已超时") {
    return "danger"
  }else if(type == "已完成") {
    return "success"
  }
}

methods中的方法

Answer 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: () => {
                                            
                                        }
                                    }
                                }, '结束活动'),
                            ]);
                        }