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

現(xiàn)在OK了。我的寫法是

{
                        title: '審核狀態(tài)',
                        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)
                        }
                    }

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官網(wǎng)的栗子，render函數(shù)中渲染你想要的樣式，不過按照你的需求是需要一個span就行 你可以在data中聲明一個方法，按照你傳過來的row.xx的值來返回對應(yīng)的顏色，用style或者class綁定都可以
給你看一下我用element的代碼，大同小異的

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

template 相當(dāng)于render函數(shù)。

stateTagType(type) {
  if(type == "已發(fā)起") {
    return "warning"
  }else if(type == "已超時") {
    return "danger"
  }else if(type == "已完成") {
    return "success"
  }
}

methods中的方法

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: () => {
                                            
                                        }
                                    }
                                }, '結(jié)束活動'),
                            ]);
                        }