数据源

简单数据

简单数据可以通过配置source``data进行设置

;[
	{
		key: 'key',
		type: 'el-select',
		name: '名称',
		requiredType: 'number',
		source: {
			data: [
				{
					label: 'Es',
					value: 1,
				},
				{
					label: 'Kibana',
					value: 2,
				},
			],
		},
		// 或者通过组件的props进行设置
		// componentProps: {
		// 	data: [],
		// }
		required: true,
	},
]

示例

接口数据

通过配置source的requestFunction进行设置

参数名称	类型	是否必选	说明
requestFunction	async function		获取数据的异步函数
params	object		数据源的 API 接口静态参数
handle	function		数据源的处理函数，第一个参数为接口返回的数据,第二个参数为请求参数，第三个参数是 form
effectKeys	array		form 中设置为请求参数的 key 集合，作为接口的请求参数参与请求
effectKeysHandle	function		effectKeys 参数值的处理函数，接收一个包含以下参数的对象：{ params: 当前请求参数, formValues: 整个表单的值, sourceData: 所有数据源, effectKeys: 当前影响的键值数组 }，返回值作为请求方法的参数
data	array		手动设置的数据源的数据（配合 showName/showValue）requestFunction 的优先级高于 data 设置的数据

示例

{
	{
				name: '所属流程',
				type: 'el-select',
				key: 'type',
				required: true,
				requiredType: 'number',
				source: {
					requestFunction: async () => {
						return http.get('/mock/allProcess')
					},
					handle: (res) => {
						return res.data
					},
				},
			},
}

示例

联动数据源

当前组件的数据源受到同表单其他字段值的影响

WARNING

如果在componentEvents自定义on-change事件,该配置无效请手动使用ref调用updateSource方法主动触发数据源更新

示例

[
	{
		name: '产品系列',
		type: 'el-select',
		key: 'product',
		required: true,
		requiredType: 'number',
		effectKeys: ['type'],
		componentProps: {
			clearable: true,
		},
		source: {
			data: [
				{
					label: '类型一',
					value: 1,
				},
				{
					label: '类型二',
					value: 2,
				},
			],
		},
	},
	{
		name: '所属流程',
		type: 'el-select',
		key: 'type',
		required: true,
		requiredType: 'number',
		source: {
			effectKeys: ['product'],
			requestFunction: mockApiRequest,
			effectKeysHandle: ({ params, formValues, sourceData, effectKeys }) => {
				// 可以访问整个表单的值
				console.log('formValues:', formValues)
				// 可以访问所有数据源
				console.log('sourceData:', sourceData)
				// 可以访问当前影响的键值 通过sourceData[key] 获取对应的数据源
				console.log('effectKeys:', effectKeys)
				// 可以基于这些信息进行更复杂的参数处理
				return {
					...params,
					// 添加额外的处理逻辑
					extraParam: 'custom_value'
				}
			},
			handle: (res) => {
				return res.data
			},
		},
	},
]

示例