vue中render函数阅读性比较好的写法推荐

最新推荐文章于 2024-09-11 09:00:00 发布

Cr丶

最新推荐文章于 2024-09-11 09:00:00 发布

阅读量1.8k

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_36255237/article/details/89330467

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

推荐写法一:

{
	title:'操作',
	align: 'center',
	render: (h ,params) =>{
		let row = params.row;
		let status = row.status;
		let that = this;

		let editButtonStyle = {
			props: {
				type: 'success',
				size: 'small',
				ghost: true
			},
			on: {
				click: () => {
					that.edit(row);
				}
			}
		};

		let editButton = h( 'Button' , editButtonStyle , '编辑' );

		let viewSourceButtonStyle = {
			props: {
				type: 'primary',
				size: 'small',
				ghost: true
			},
			style: {
				marginLeft: '20px'
			},
			on: {
				click: () => {
					that.viewSource(row);
				}
			}
		};

		let viewSourceButton = h( 'Button' , viewSourceButtonStyle , '查看' );

		if( status == 0 ){ // 正常
			return h( 'div', [ editButton , viewSourceButton ] );
		}else { // 作废,常规写法。
			return h('div', [
				h(
					'Button',{
						props: {
							type: 'success',
							size: 'small',
							ghost: true
						},
						on: {
							click: () => {
								that.edit(row);
							}
						}
					},'edit'
				),
				h(
					'Button' , {
						props: {
							type: 'primary',
							size: 'small',
							ghost: true
						},
						style: {
							marginLeft: '20px'
						},
						on: {
							click: () => {
								that.viewSource(row);
							}
						}
					} , '查看'
				)
			]);
		}
	}
}

推荐写法二:

render: (h ,params) =>{
    let that = this;
    return h('div', that.getTaskOperatingData(h,params.row));
}

/**
 * functionInfo :  render function package
 * createTime :  2019-04-16 15:30:02
 * creator: Cr
 * */
getTaskOperatingData ( h , row ) {
    let status = row.status;
    let that = this;

    let editButtonStyle = {
        props: {
            type: 'success',
            size: 'small',
            ghost: true
        },
        on: {
            click: () => {
                that.edit(row);
            }
        }
    };
    let editButton = h( 'Button' , editButtonStyle , '编辑' );

    let viewSourceButtonStyle = {
        props: {
            type: 'primary',
            size: 'small',
            ghost: true
        },
        style: {
            marginLeft: '20px'
        },
        on: {
            click: () => {
                that.viewSource(row);
            }
        }
    };
    let viewSourceButton = h( 'Button' , viewSourceButtonStyle , '查看' );

    let obsoleteButtonStyle = {
        props: {
            type: 'error',
            size: 'small',
            ghost: true
        },
        style: {
            marginLeft: '20px'
        },
        on: {
            click: () => {
                that.obsolete(row);
            }
        }
    };
    let obsoleteButtonButton = h( 'Button' , obsoleteButtonStyle , '作废' );

    let invalidButtonStyle = {
        props: {
            type: 'error',
            size: 'small',
            ghost: true,
            disabled: true
        },
        style: {
            marginLeft: '20px'
        },
    };
    let invalidButton = h( 'Button' , invalidButtonStyle , '已作废' );

    let data = [];
    if( status == 0 ){ // 正常
        data = [ editButton, viewSourceButton, obsoleteButtonButton ];
    }else { // 作废
        data = [ viewSourceButton,invalidButton ];
    }
    return data;
},