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)//此处显示数字的百分比 ]) } }