获取外部数据
本文介绍如何通过 setData
和 getData
方法在 form-create 中获取和管理外部数据。你将学习如何在组件中定义、传递、监听和使用外部数据,以及在事件中传递数据的方法。
外部数据传递
在表单组件中,我们通常需要在组件与外部数据之间进行通信。
将数据用 ref 包裹后,可以方便地监听数据的变化。setData 支持传递任意类型的数据。
1. 在组件中定义和添加数据
在组件的 mounted
生命周期中,你可以定义和添加外部数据:
js
import {formCreate} from '@form-create/designer';
import { ref, watch } from 'vue';
export default {
name: 'app',
mounted() {
// 定义数据对象,并用 ref 包裹以便监听变化
const data = ref({
id: 'ref_Fnfglyptoxuhb6c'
});
// 监听数据变化,方便调试或执行特定操作
watch(data, () => {
console.log('data 发生变化');
}, { deep: true });
// 使用 formCreate 的 setData 方法添加外部数据
formCreate.setData('data', data);
// 设置一个外部回调函数,例如表单提交时的处理逻辑
formCreate.setData('callback', (formData) => {
// 这里可以添加提交表单的逻辑
});
},
unmounted() {
// 在组件卸载时,清除添加的外部数据,避免内存泄漏
formCreate.removeData('data');
formCreate.removeData('callback');
}
};
2. 在组件事件中获取并修改数据
在组件的事件中,你可以通过 getData
获取并修改外部数据,例如在按钮点击时修改数据:
js
function handleClick($inject) {
// 先获取外部数据的引用
const data = $inject.api.getData('data');
// 修改数据,例如更新表单项的 ID
data.value.id = $inject.rule._fc_id;
// 执行外部回调函数,例如提交表单
$inject.api.getData('callback')();
}
在事件中传递数据
在某些情况下,你可能需要在组件事件之间传递数据。例如,在点击按钮打开弹窗前保存当前表单项的 ID,然后在弹窗提交时使用该 ID。
1. 配置按钮的点击事件
js
function click($inject) {
// 获取当前表单项的 ID,并保存到外部数据中
$inject.api.setData('id', $inject.api.getValue('id'));
// 设置弹窗关闭时的回调函数
$inject.api.setData('onClose', () => {
// 清除保存的 ID
$inject.api.removeData('id');
});
// 打开指定的弹窗
$inject.api.open('ref_F2vulxvqc841dac');
}
2. 配置弹窗的提交事件
js
function submit($inject) {
// 获取表单数据和外部保存的 ID
const formData = $inject.args[0];
const id = $inject.api.getData('id');
// 提交表单数据,同时传递保存的 ID
$inject.api.fetch({
action: 'xxxx?id=' + id,
method: 'post',
data: formData
}).then(res => {
// 提交成功后,执行关闭弹窗的回调函数
$inject.api.getData('onClose')();
});
}
外部数据的动态更新
假设我们需要根据用户操作实时更新外部数据,并让表单响应这些变化。例如,根据用户选择的不同选项,动态调整表单中的可见字段。
js
import formCreate from '@form-create/element-ui';
import { ref, watch } from 'vue';
export default {
name: 'app',
setup() {
// 定义一个响应式状态,用于控制表单项的显示与隐藏
const visibility = ref(true);
// 监听状态变化,自动更新外部数据
watch(visibility, (newValue) => {
formCreate.setData('visibility', newValue);
});
// 返回状态以便在模板中绑定
return {
visibility
};
},
mounted() {
// 初始化外部数据
formCreate.setData('visibility', true);
}
};
在表单组件中,使用 getData
方法来控制字段的显示或隐藏:
js
function updateFormVisibility($inject) {
// 获取外部数据
const isVisible = $inject.api.getData('visibility');
// 根据外部数据调整表单项的可见性
$inject.api.updateRule($inject.rule.id, {
props: {
display: isVisible
}
});
}
动态设置回调函数
除了数据,回调函数也可以动态设置。例如,用户可以根据特定条件设置不同的提交逻辑。
js
function setDynamicCallback($inject, condition) {
// 根据条件设置不同的回调函数
if (condition) {
$inject.api.setData('callback', (formData) => {
console.log('条件为真,提交数据:', formData);
// 执行特定的提交逻辑
});
} else {
$inject.api.setData('callback', (formData) => {
console.log('条件为假,执行其他操作');
// 执行不同的操作
});
}
}
在事件中执行回调:
js
function onSubmit($inject) {
// 获取并执行动态设置的回调函数
$inject.api.getData('callback')($inject.args[0]);
}
使用异步数据源
在实际应用中,外部数据有时来自异步数据源,例如 API 请求或 WebSocket 消息。在这种情况下,form-create 可以方便地与这些异步数据源集成。
1. 加载和处理异步数据
假设我们需要在组件挂载时从远程服务器加载数据,并将其注入到表单中。
js
import formCreate from '@form-create/element-ui';
import { ref, onMounted } from 'vue';
import axios from 'axios';
export default {
name: 'app',
setup() {
const data = ref(null);
onMounted(async () => {
// 从 API 获取数据
const response = await axios.get('/api/data');
data.value = response.data;
// 将获取的数据设置为外部数据
formCreate.setData('asyncData', data.value);
});
return {
data
};
}
};
2. 动态更新表单项
当异步数据加载完成后,你可以动态更新表单项,以反映最新的数据状态。
js
function updateFormWithAsyncData($inject) {
// 获取异步加载的外部数据
const asyncData = $inject.api.getData('asyncData');
// 更新表单项内容,例如填充表单中的选择框
$inject.api.updateRule($inject.rule.id, {
props: {
options: asyncData.options // 使用异步数据填充选项
}
});
}
通过这些方法,你可以灵活地在 form-create 中传递和管理外部数据,确保组件之间的数据流畅通无阻。