Vue的渲染函数render

 

（1）直接调取方法

 

 {
                        title: '开始时间',
                        align: 'center',
                        maxWidth: 120,
                        key: 'starttime',
                        render: (h, params) => {
                            return h('div',
                                formatDate(new Date(params.row.starttime), 'yyyy-MM-dd')
                            )
                        }
                    }

// 时间格式化
export function formatDate(date, fmt) {
let o = {
'M+': date.getMonth() + 1, // 月份
'd+': date.getDate(), // 日
'h+': date.getHours(), // 小时
'm+': date.getMinutes(), // 分
's+': date.getSeconds(), // 秒
'S': date.getMilliseconds() // 毫秒
}
if(/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
}
for(var k in o) {
if(new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
}
}
return fmt
}

 

（2）标签Tag样式组合

                    {
                        title: '任务状态',
                        align: 'center',
                        minWidth: 80,
                        maxWidth: 150,
                        key: 'stateid',
                        render: (h, params) => {
                            const row = params.row;
                            const color = row.stateid == '3010' ? '' : '#5cadff';
                            //const text = row.islockinv === '3010' ? '否' : '是';
                            return h('Tag', {
                                props: {
                                    type: 'dot',
                                    color: color
                                }
                            }, params.row.statename);
                        }
                    }

 

　　

（3）多个自定义按钮

 还可以根据需要写逻辑和按钮（包含点击事件）

{
                        title: '操作',
                        key: 'action',
                        fixed: "right",
                        align: 'center',
                        invSelectParams:{},
                        minWidth: 200,
                        render: (h, params) => {
                            //数量、物料都错误
                            if (params.row.usagestate == 1 && params.row.state == 1) {
                                if (params.row.editstate == '0') {
                                    // return stat + a +c+ end;
                                    return h('div', [
                                        h('Button', {
                                            on: {
                                                click: () => {
                                                    this.storeEdit(params)
                                                }
                                            },
                                            props: {
                                                type: 'primary',
                                                size: 'small'
                                            },
                                            style: {
                                                marginRight: '5px'
                                            },
                                        }, '编辑'),
                                        h('Button', {
                                            on: {
                                                click: () => {
                                                    this.invSelectParams = params,
                                                    this.params = params, this.modal = true
                                                }
                                            },
                                            props: {
                                                type: 'primary',
                                                float: 'left',
                                                size: 'small'
                                            }
                                        }, '选择物料')
                                    ]); //end return

                                } else {
                                    // return stat + b +c+ end;
                                    return h('div', [
                                        h('Button', {
                                            on: {
                                                click: () => {
                                                    this.storeSave(params)
                                                }
                                            },
                                            props: {
                                                type: 'primary',
                                                size: 'small'
                                            },
                                            style: {
                                                marginRight: '5px'
                                            },
                                        }, '保存'),
                                        h('Button', {
                                            on: {
                                                click: () => {
                                                    this.invSelectParams = params,
                                                    this.params = params, this.modal = true
                                                }
                                            },
                                            props: {
                                                type: 'primary',
                                                size: 'small'
                                            }
                                        }, '选择物料')
                                    ]); //end return
                                }
                            } else if (params.row.usagestate == 1 && params.row.state == 0) {
                                //数量错误、物料正确
                                if (params.row.editstate == '0') {
                                    // return stat + a + end;
                                    return h('div', [
                                        h('Button', {
                                            on: {
                                                click: () => {
                                                    this.storeEdit(params)
                                                }
                                            },
                                            props: {
                                                type: 'primary',
                                                size: 'small'
                                            },
                                            style: {
                                                marginRight: '5px'
                                            },
                                        }, '编辑')
                                    ]); //end return

                                } else {
                                    // return stat + b + end;
                                    return h('div', [
                                        h('Button', {
                                            on: {
                                                click: () => {
                                                    this.storeSave(params)
                                                }
                                            },
                                            props: {
                                                type: 'primary',
                                                size: 'small'
                                            },
                                            style: {
                                                marginRight: '5px'
                                            },
                                        }, '保存')
                                    ]); //end return
                                }
                            } else if (params.row.usagestate == 0 && params.row.state == 1) {
                                //数量正确、物料错误
                                // return stat + c + end;
                                return h('div', [
                                    h('Button', {
                                        on: {
                                            click: () => {
                                                this.invSelectParams = params,
                                                this.params = params, this.modal = true
                                            }
                                        },
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        }
                                    }, '选择物料')
                                ]); //end return
                            }
                        }
                    }

 

　　可以进行编辑的校验

　　

{
                        title: '用量',
                        align: 'center',
                        minWidth: 150,
                        key: 'usage',
                        render: (h, params, item) => {
                            let that = this;
                            if (params.row.editstate == '0') {
                                return h('div', [
                                    h('div', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                    }, params.row.usage)
                                ]); //end return
                            } else {
                                return h('div', [
                                    h('Input', {
                                        style: {
                                            width: '100px',
                                            float: 'left'
                                        },
                                        props: {
                                            type: 'text',
                                            // id:'',
                                            // value: params.row.outstore
                                            value: this.bomData[params.index].usage
                                        },
                                        on: {
                                            input: (value) => {
                                                if (!isNaN(value)) {
                                                    params.row.usage = value
                                                    this.bomData[params.index] = params.row
                                                } else {
                                                    that.$Message.error({
                                                        content: '请输入数字',
                                                        duration: 2
                                                    });
                                                    return;
                                                }
                                            }
                                        }
                                    })
                                ]); //end return
                            }
                        }
                    }

 

 

　　

 

（4）进度条的处理

{
                        title: '完成进度',
                        minWidth: 100,
                        align: 'center',
                        key: 'd_progress',
                        //                       minWidth: 120,
                        render: (h, params) => {
                            return h('div', [
                                h('Progress', {
                                    props: {
                                        type: 'Progress',
                                        size: 'small',
                                        percent: ((params.row.allday - params.row.leftday) / params.row.allday * 100)//此处显示进度条
                                    }
                                },params.row.progress)//此处显示数字的百分比
                            ])
                        }
                    }

 

 

转载于:https://www.cnblogs.com/songsong003/p/11004840.html