iview中render函数运用

render函数的运用

参数解读：

​ h: vue Render函数的别名（全名 createElement）即 Render函数

​ params： table 该行内容的对象

​ props：设置创建的标签对象的属性

​ style：设置创建的标签对象的样式

​ on：为创建的标签绑定事件

​ scopedSlots：显示作用域插槽

完整代码：

<template>
    <div class="hello">
        <Table border :columns="columns" :data="data"></Table>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        data() {
            return {
                columns: [  // 表格列的配置描述
                    {
                        title: "头像",
                        key: "avatar",
                        align: "center",
                        width: 100,
                        render:(h, params) => {
                            return h('Avatar', {  // 也可用原生img标签代替
                                style: {  
                                    width: '30px',
                                    height: '30px',
                                    'border-radius': '50%'
                                },
                                attrs: {
                                    src:'https://i.loli.net/2017/08/21/599a521472424.jpg'
                                }
                            })
                        }
                    },
                    {
                        title: "时间选择器",
                        key: "date",
                        align: "center",
                        render:(h, params) => {
                            return h('DatePicker', {
                                props: {
                                    value: params.row.date,
                                    size: 'small',
                                    type: 'datetime'
                                },
                                on: {
                                    'on-change': (value) => {  // 输入框失去焦点时触发
                                        // 赋值   data：表格数据
                                        this.data[params.index].date = value;  
                                    }
                                }
                            });
                        }
                    },
                    {
                        title: "input输入框",
                        key: "inputText",
                        align: "center",
                        render:(h, params) => {
                            return h('Input', {
                                props: {
                                    value: params.row.inputText ? params.row.inputText : '',
                                    size: 'small'
                                },
                                on: {
                                    'on-blur': (event) => {  // 输入框失去焦点时触发
                                        // 赋值   data：表格数据
                                        this.data[params.index].inputText = 	 event.target.value;  
                                    }
                                }
                            });
                        }
                    },
                    {
                        title: 'select下拉框',
                        key: 'selectText',
                        align: 'center',
                        render: (h, params) => {
                            return h('Select',{
                                    props:{
                                        value: params.row.selectText ? params.row.selectText : '',
                                        size: 'small'
                                    },
                                    on: {
                                        'on-change':(value) => {  //  下拉框选定的值
                                            this.data[params.index].selectText = value;
                                        }
                                    }
                                },
                                /**
                                 * this.selectAction   下拉框Option数组
                                 * selectAction:[
                                        {
                                            value: '01',
                                            name:'select_1'
                                        },
                                        {
                                            value: '02',
                                            name:'select_2'
                                        }
                                    ]
                                 */
                                this.selectAction.map((item) =>{  // 下拉选项
                                    return h('Option', {
                                        props: {
                                            value: item.value,
                                            label: item.name
                                        }
                                    })
                                })
                            )
                        }
                    },
                    {
                        title: "申请年份",
                        align: "center",
                        key: "applyDate",
                        render: (h, params) => {
                            return h('span', {
                                    
                            }, new Date(params.row.applyDate).getFullYear())  // 对后端返回的时间戳进行处理，返回页面需要展示的格式
                        }
                    },
                    {
                        title: "可控开关",
                        key: "isOpen",
                        align: "center",
                        width: 100,
                        render:(h, params) => {
                            return h('i-switch', {
                                props: {
                                    value: params.row.isOpen ? params.row.isOpen : false,  // 指定当前是否选中  Boolean类型  (isOpen后端返回字段，根据自己接口返回数据，自行修改)
                                },
                                scopedSlots:{
                                    open: () => h('span', 'on'),  // 自定义显示打开时的内容
                                    close: () => h('span', 'off')  // 自定义显示关闭时的内容
                                },
                                on: {
                                    /*
                                     * 触发事件是on-change
                                     * 参数value是回调值  Boolean类型                                    
                                    */ 
                                    'on-change': (value) => { 
                                        this.data[params.index].isOpen = value;  // 赋值  data：表格数据
                                    }
                                }
                            })
                        }
                    },
                    {
                        title: "评分",
                        key: "rate",
                        align: "center",
                        render:(h, params) => {
                            return h('Rate', {
                                props: {
                                    value: Number(params.row.rate),  // 当前 star 数   Number类型
                                    'allow-half': true,  // 可以选中半星
                                    disabled: false  // 是否只读
                                },
                                on: {
                                    'on-change': (value) => {   // 评分改变时触发
                                        this.data[params.index].rate = value;  // 赋值  data：表格数据
                                    }
                                }
                            })
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {  // 按钮操作
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {  // 自定义样式
                                        marginRight: '5px'
                                    },
                                    on: {  // 自定义事件
                                        click: () => {
                                            this.show(params.index)  // params.index是拿到table的行序列，可以取到对应的表格值
                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data: [  // 表格数据
                    {
                        inputText: '18',
                        isOpen: false,
                        selectText : '02',
                        rate: 4,
                        date: '2019-02-03 00:08:45',
                        applyDate: 1551835636920
                    },
                    {
                        inputText: '',
                        isOpen: true,
                        selectText : '01',
                        rate: 1.5,
                        date: '',
                        applyDate: 1506124800000
                    }
                ],
                selectAction:[
                    {
                        value: '01',
                        name:'select_1'
                    },
                    {
                        value: '02',
                        name:'select_2'
                    }
                ]
                
            }
        },
        methods: {
            show (index) {  // 查看
                this.$Modal.info({
                    title: '查看',
                    content: '查看详情'
                })
            },
            remove (index) {  // 删除
                this.data.splice(index, 1);
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .hello{
        width: 90%;
        margin: 0 auto;
        padding: 20px 50px 0;
    }
</style>