How does the table component of iview transform different font colors according to the state in a column?

clipboard.png
I want to change different colors according to different states, what to do, using the iview framework.
every time I use these frameworks, I will be made difficult by some minor problems in table

.

now OK. My way of writing is

{
                        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)?"-sharped3f14":(params.row.state==1?"-sharp19be6b":"-sharp2d8cf0")
                              }
                          },tmpStr)
                        }
                    }
The

column accepts a render prop
https://iview.github.io/compo.


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>`;
    }

Chestnut on iview official website. Render the style you want in the render function, but you can declare a method in data to return the corresponding color according to the value of row.xx you passed. You can use style or class binding
to show you the code I use element, which is more or less the same

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

template is equivalent to the render function.

stateTagType(type) {
  if(type == "") {
    return "warning"
  }else if(type == "") {
    return "danger"
  }else if(type == "") {
    return "success"
  }
}

methods in 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: () => {
                                            
                                        }
                                    }
                                }, ''),
                            ]);
                        }
Menu