vueでrender関数の読解性が良い書き方をお勧めします

3595 ワード

推薦の書き方一:
{
	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);
							}
						}
					} , '  '
				)
			]);
		}
	}
}

推薦の書き方2:
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;
},