Vue的渲染函数render

时间:2019-06-11
本文章向大家介绍Vue的渲染函数render,主要包括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)多个自定义按钮

原文地址:https://www.cnblogs.com/songsong003/p/11004840.html