iview中table表格中render函数的应用

参考：https://blog.csdn.net/jjw_zyfx/article/details/102542231

iview表格的render函数作用是自定义渲染当前列，权限高于key，所以使用了render函数，那么表格的key值就无效了。render函数传入两个参数，第一个是 h，第二个是对象，包含 row、column 和 index，分别指当前单元格数据，当前列数据，当前是第几行。

具体用法：
render:(h,params) => {
return h(" 定义的元素 “，{ 元素的性质 }，” 元素的内容"/[元素的内容])
}

//vue文件中
 <Table :columns="columns1" :data="hourDataList"></Table>

//js文件中
import axios from "axios"

export default {
    data() {
        return {
                hourDataList: [],
                columns1: [
                    {   
                        title:'时间',
                        key:'a',
                        render: (h, params) => {
                            return (
                                <span>{params.row.hour}</span>
                            )
                        },
                        width:180
                    },
                    {
                        title: '日期',
                        key: 'b',
                        render:(h,params)=>{
                            return(
                            <span>{params.row.date}</span>
                            )
                        },
                        width:180
                    },
                    {
                        title: '数据类型',
                        key: 'd',
                        render:(h,params)=>{
                            return(
                            <span>{params.row.data_type}</span>
                            )
                        },
                        width:180
                    },
                    {
                        title:'数据状态',
                        key:'e',
                        render:(h,params)=>{
                            if(params.row.date_status==2){
                                return h('div',[
                                    h('Icon',{
                                        props:{
                                            type:'md-heart'
                                        },
                                        style:{
                                            color:'#e54847',
                                            fontSize:'18px'
                                        }
                                    })
                                ])
                            }else{
                                return h('div',[
                                    h('Icon',{
                                        props:{
                                            type:'md-heart'
                                        },
                                        style:{
                                            color:'##2d5231',
                                            fontSize:'18px'
                                        }
                                    })
                                ])  
                            }
                            
                        }
                    }
                ],
                proDate:'',
                laterDate:''

        }



    },
    methods:{
       getData(){
           console.log('love')
       }
    },
    created() {
        axios({
            method: "post",
            url: "/users/list",
            data: {
                page: 1,
                limit: 10
            }
        }).then((data) => {
            this.hourDataList = data.data.data.list;
            console.log(this)
            console.log(this.hourDataList,1111)
            
        })
        this.getData();
        console.log

    },


}