表单布局

WARNING

在使用el-row和el-col进行排版时，可以通过colProps控制字段所在的el-col所占的宽度，并且嵌套的组件默认占满宽度

默认row配置

{
	type: 'el-row',
	componentProps: {
		gutter: 0,
		// 如果不传值，默认为0
	}
}

默认col配置

{
	xs: 24,
	sm: 12,
	md: 12,
	lg: 6,
}

排版

el-row/el-col

在mode='form'时，可以使用el-row和el-col作为type类型进行嵌套排版

;[
	{
		type: 'el-row',
		children: [
			{
				name: 'name',
				type: 'el-input',
				key: 'key',
				// 通过colProps控制字段所在的el-col所占的宽度
				colProps: {
					md: 24,
					lg: 24,
				},
			},
		],
	},
	{
		type: 'el-row',
		children: [
			{
				//...
				colProps: {
					md: 12,
					lg: 12,
				},
			},
			{
				//...
				colProps: {
					md: 12,
					lg: 12,
				},
			},
		],
	},
]

示例

标题/分割线组件

用于表单内容的分组

{
		type:'Title',
		name:'标题/分割线组件',
		componentProps:{
			class:'fly-form-title-container', // 自定义el-row class 控制样式
			// justify:'center' // el-row的props
		},
		style: { // style作用于 fly-form-title
			'font-size': '14px',
			'font-weight': 'bold',
			'color': '#333',
			'border-bottom': '1px solid #ccc',
		}
	}

其它配置

其它配置参考elementPLus的formProps，不再赘述

示例