iview中Table的render用法大全

1、日期格式化（yyyy-MM-dd hh:mm:s）

{
     title: "格式化时间",
      key: "time",
      render: (h, params) => {
        let temp = ''
        if(params.row.time==null){
          temp = '无'
        }else{
          temp = new Date(params.row.time).format("yyyy-MM-dd hh:mm:s")
        }
        return h(
          "div",temp
        );
}

2、不同字段渲染不同颜色

{
      title: "流程状态",
      key: "processStatus",
      align: "center",
       render: (h, params) => {
         let tmpStr = "";
         if (params.row.status == 3) {
           tmpStr = "拒绝";
         } else if (params.row.status == 2) {
           tmpStr = "通过";
         } else if(params.row.status == 1){
           tmpStr = "审核中";
         }else{
           tmpStr = "结束";
         }
         return h(
           "span",
           {
             style: {
               color:
                 params.row.status == 3 ? "#ff6600"
                   : params.row.status == 2 ? "#19be6b" 
                   : params.row.status == 1 ? "#2d8cf0" : "#a005fdb3"
             }
           },
           tmpStr
         );
       }
    },

3、渲染对象的属性

{
      title: "管廊名称",
      key: "tunnel",
      align: "center",
      render: (h, params) => {
        return h("div", params.row.tunnel.name);
      }
}

4、渲染select

    {
        title: '借用人',
        key: 'borrower',
        align: 'center',
        render: (h,params) => {
            return h('Select',{
                props:{
                    value: this.staffs
                },
                on:{
                    'on-change':(event)=>{
                    }
                }
            },
            this.staffs.map((item)=>{
                return h('Option',{
                    props:{
                        value:item.id,
                        label:item.name
                    }
                })
            })
            )
        }
    }
 
data(){
        return{
        staffs:[]
        }
},
mounted:{
   //获取借用人列表
   this.axios.get('staffs').then(res=>{
      let{ code,data } = res.data
      if(code==200){
        this.staffs = data
      }
   })

}