字段操作
API 提供了一系列丰富的字段操作方法，允许开发者在表单的各个阶段动态控制和操作表单中的字段。这些方法帮助您更灵活地处理表单数据和交互需求。
数据结构
以下是 Api 字段操作相关的数据结构及简明解释：
ts
interface Api {
// 获取指定组件的 DOM 元素或 Vue 实例
el(id: string): any;
// 获取表单中所有字段的名称
fields(): string[];
// 获取当前表单的数据对象，返回所有字段的值
formData(): Object;
// 获取特定字段的数据，返回指定字段的值
formData(field: string[]): Object;
// 获取指定字段的值
getValue(field: string): any;
// 用新的数据覆盖表单的当前值
coverValue(formData: Object): void;
// 设置表单的值，可以为整个表单设置，也可以为特定字段设置
setValue(formData: Object): void;
setValue(field: string, value: any): void;
// 根据字段名删除对应的组件
removeField(field: string): Rule;
// 隐藏或显示表单的指定组件(无 DOM 节点)
hidden(hidden: Boolean): void;
hidden(hidden: Boolean, field: string | Array<string>): void;
// 控制表单组件的显示与否(有 DOM 节点)
display(hidden: Boolean): void;
display(hidden: Boolean, field: string | Array<string>): void;
// 获取组件的隐藏状态，返回布尔值
hiddenStatus(field: String): Boolean;
// 获取组件的显示状态，返回布尔值
displayStatus(field: String): Boolean;
// 禁用或启用表单的指定组件
disabled(disabled: Boolean): void;
disabled(disabled: Boolean, field: string | Array<string>): void;
// 同步指定字段或规则，确保表单的状态与最新数据同步
sync(field: string | string[]): void;
sync(rule: Rule | Rule[]): void;
// 获取指定组件的方法，用于调用组件的自定义方法
method(id: string, name: string): (...args: any[]) => any;
// 手动执行指定组件的方法
exec(id: string, name: string, ...args: any[]): any;
// 手动触发组件的事件，适用于模拟用户操作或触发自定义逻辑
trigger(id: string, event: string, ...args: any[]): void;
}获取表单字段
fields 方法返回表单中所有字段的名称列表。该方法非常适合在需要遍历表单字段或动态操作多个字段时使用。
typescript
type fields = ()=>string[]- 示例：
js
const fields = fApi.fields();
console.log(fields); // 输出表单中所有字段的名称数组获取指定字段值
getValue 方法根据字段名获取对应字段的当前值。
typescript
type getValue = (field:string) => any- 示例：
js
const value = fApi.getValue('goods_name');
console.log(value); // 输出指定字段的当前值设置表单值
覆盖字段值 (coverValue)
coverValue 方法会覆盖未定义的字段，设置为 undefined。
typescript
type coverValue = (formData:{[field:string]:any}) => void- 示例：
js
fApi.coverValue({ goods_name: 'HuaWei', price: 1000 });
// 覆盖所有字段，未定义的字段会被设置为 undefined合并字段值 (setValue)
setValue 方法会合并传入的字段值，formData 中未定义的字段不做修改。
typescript
interface setValue {
(formData:{[field:string]:any}): void
(field:string, value:any): void
}- 示例：
js
fApi.setValue({ goods_name: 'HuaWei', price: 1000 });
// 或者单独设置某个字段的值
fApi.setValue('goods_name', 'HuaWei');别名方法changeValue, changeField
重置表单值
resetFields 方法用于重置表单的所有字段值，或重置指定字段的值。
typescript
interface resetFields {
():void
(field:string[]):void
}- 示例：
js
fApi.resetFields(); // 重置所有字段的值
fApi.resetFields(['goods_name', 'price']); // 仅重置指定字段的值隐藏字段 (不渲染)
隐藏字段的组件不会渲染，DOM 节点不生成，因此表单验证不会生效。
typescript
interface hidden {
//隐藏全部组件
(status:Boolean):void
//隐藏指定组件
(status:Boolean, field:string):void
//隐藏部分组件
(status:Boolean, field:string[]):void
}- 示例：
js
fApi.hidden(true); // 隐藏所有组件
fApi.hidden(true, 'goods_name'); // 隐藏指定组件
fApi.hidden(true, ['goods_name', 'price']); // 隐藏多个组件获取组件隐藏状态
hiddenStatus 方法用于获取指定字段是否处于隐藏状态。
typescript
type hiddenStatus = (field:string)=>Boolean- 示例：
js
const status = fApi.hiddenStatus('goods_name');
console.log(status); // 输出 true 或 false隐藏组件 (渲染)
通过 display: none 隐藏组件，组件仍然渲染但不显示。
typescript
interface display {
//隐藏全部组件
(status:Boolean):void
//隐藏指定组件
(status:Boolean, field:string):void
//隐藏部分组件
(status:Boolean, field:string[]):void
}- 示例：
js
fApi.display(false); // 显示所有组件
fApi.display(false, 'goods_name'); // 显示指定组件
fApi.display(false, ['goods_name', 'price']); // 显示多个组件获取组件隐藏状态
displayStatus 方法用于获取指定字段是否处于显示状态。
typescript
type displayStatus = (field:string)=>Boolean- 示例：
js
const status = fApi.displayStatus('goods_name');
console.log(status); // 输出 true 或 false禁用组件
disabled 方法用于禁用表单中的所有组件、指定组件或部分组件。
typescript
interface disabled {
//禁用全部组件
(status:Boolean):void
//禁用指定组件
(status:Boolean, field:string):void
//禁用部分组件
(status:Boolean, field:string[]):void
}- 示例：
js
fApi.disabled(true); // 禁用所有组件
fApi.disabled(true, 'goods_name'); // 禁用指定组件
fApi.disabled(true, ['goods_name', 'price']); // 禁用多个组件删除字段
removeField 方法用于从表单中删除指定组件。
typescript
type removeField = (field:string) => Rule- 示例：
js
const rule = fApi.removeField('goods_name');
console.log(rule); // 返回被删除的字段生成规则刷新组件渲染
sync 方法用于手动刷新指定字段的组件渲染。
typescript
interface sync{
//通过 field 更新指定组件
(field:string):void
//通过生成规则更新指定组件
(rule:Rule):void
}- 示例：
js
fApi.sync('goods_name'); // 刷新指定字段的组件
fApi.sync(rule); // 通过生成规则刷新组件组件方法
exec 方法用于手动执行指定字段组件的某个方法。
typescript
type exec = (field:string, method:string, ...args:any[]) => any- 示例：
js
fApi.exec('goods_name', 'focus'); // 让指定字段的组件获得焦点method 方法用于获取指定字段组件的某个方法，以便后续手动调用。
typescript
type method = (field:string, method:string) => Function- 示例：
js
const focusMethod = fApi.method('goods_name', 'focus');
focusMethod(); // 手动调用组件的 focus 方法手动触发组件事件
trigger 方法用于手动触发指定字段组件的事件。
typescript
type trigger = (field:string, event:string, ...args:any[]) => void- 示例：
js
fApi.trigger('goods_name', 'change', 'new value'); // 手动触发 change 事件获取组件的vm/dom元素
el 方法用于获取指定字段组件的 Vue 实例或 DOM 元素。
typescript
type el = (field:string) => Vue|Document|undefined- 示例：
js
const vm = fApi.el('goods_name');
console.log(vm); // 输出组件的 Vue 实例或 DOM 元素关闭frame组件的弹出框
closeModal 方法用于关闭指定 frame 组件的弹出框。
typescript
type closeModal = (field:string) => void- 示例：
js
fApi.closeModal('frame'); // 关闭指定 frame 组件的弹出框示例
动态隐藏和显示表单字段
在用户填写表单时，根据选择的选项动态隐藏或显示其他相关字段。例如，当用户选择"公司客户"时，显示公司名称字段。
js
if (fApi.getValue('customer_type') === 'company') {
fApi.hidden(false, 'company_name'); // 显示公司名称字段
} else {
fApi.hidden(true, 'company_name'); // 隐藏公司名称字段
}批量设置表单字段的值
在一个复杂的表单中，需要根据用户选择的模板，批量填充表单中的多个字段。
js
const templateData = {
name: 'Default Name',
address: '123 Main St',
city: 'Metropolis'
};
fApi.setValue(templateData); // 批量设置表单值移除不必要的表单字段
在一个动态表单中，当用户选择不需要某个特定字段时，移除该字段以简化表单。
js
if (fApi.getValue('needs_special_field') === false) {
fApi.removeField('special_field'); // 移除不需要的字段
}动态同步表单数据
在一个电商平台中，用户选择商品后，系统需要自动填充商品价格，并计算总价。
js
const productPrice = fApi.getValue('selected_product_price');
const quantity = fApi.getValue('quantity');
fApi.setValue('total_price', productPrice * quantity); // 计算并设置总价
fApi.sync('total_price'); // 同步总价字段的显示自动清除和重置表单状态
在一个表单提交后，系统需要自动清除表单的所有数据，并重置为初始状态，以便用户可以重新填写表单。
js
fApi.submit().then(() => {
fApi.coverValue({}); // 清除所有表单数据
});