# Form 表單組件
對`antv`的 form 組件進行封裝,擴展一些常用的功能
> 如果文檔內沒有,可以嘗試在在線示例內尋找
[TOC]
## Usage
### useForm 方式
下面是一個使用簡單表單的示例,只有一個輸入框
~~~
<template>
<div class="m-4">
<BasicForm
:labelWidth="100"
:schemas="schemas"
:actionColOptions="{ span: 24 }"
@submit="handleSubmit"
/>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicForm, FormSchema } from '/@/components/Form';
import { CollapseContainer } from '/@/components/Container';
import { useMessage } from '/@/hooks/web/useMessage';
const schemas: FormSchema[] = [
{
field: 'field',
component: 'Input',
label: '字段1',
colProps: {
span: 8,
},
defaultValue: '1',
componentProps: {
placeholder: '自定義placeholder',
onChange: (e) => {
console.log(e);
},
},
},
];
export default defineComponent({
components: { BasicForm, CollapseContainer },
setup() {
const { createMessage } = useMessage();
return {
schemas,
handleSubmit: (values: any) => {
createMessage.success('click search,values:' + JSON.stringify(values));
},
};
},
});
</script>
~~~
### template 方式
所有可調用函數見下方`Methods`說明
~~~
<template>
<div class="m-4">
<BasicForm
:schemas="schemas"
ref="formElRef"
:labelWidth="100"
@submit="handleSubmit"
:actionColOptions="{ span: 24 }"
/>
<div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { BasicForm, FormSchema, FormActionType, FormProps } from '/@/components/Form';
import { CollapseContainer } from '/@/components/Container';
const schemas: FormSchema[] = [
];
export default defineComponent({
components: { BasicForm, CollapseContainer },
setup() {
const formElRef = ref<Nullable<FormActionType>>(null);
return {
formElRef,
schemas,
setProps(props: FormProps) {
const formEl = formElRef.value;
if (!formEl) return;
formEl.setProps(props);
},
};
},
});
</script>
~~~
## useForm
form 組件還提供了`useForm`,方便調用函數內部方法
### 示例
~~~
<template>
<BasicForm @register="register" @submit="handleSubmit" />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
import { CollapseContainer } from '/@/components/Container/index';
import { useMessage } from '/@/hooks/web/useMessage';
const schemas: FormSchema[] = [
{
field: 'field1',
component: 'Input',
label: '字段1',
colProps: {
span: 8,
},
componentProps: {
placeholder: '自定義placeholder',
onChange: (e: any) => {
console.log(e);
},
},
},
];
export default defineComponent({
components: { BasicForm, CollapseContainer },
setup() {
const { createMessage } = useMessage();
const [register, { setProps }] = useForm({
labelWidth: 120,
schemas,
actionColOptions: {
span: 24,
},
});
return {
register,
schemas,
handleSubmit: (values: any) => {
createMessage.success('click search,values:' + JSON.stringify(values));
},
setProps,
};
},
});
</script>
~~~
### 參數介紹
~~~
const [register, methods] = useForm(props);
~~~
**參數 props 內的值可以是 computed 或者 ref 類型**
**register**
register 用于注冊`useForm`,如果需要使用`useForm`提供的 api,必須將 register 傳入組件的`onRegister`
~~~
<template>
<BasicForm @register="register" @submit="handleSubmit" />
</template>
<script>
export default defineComponent({
components: { BasicForm },
setup() {
const [register] = useForm();
return {
register,
};
},
});
</script>
~~~
`Methods`見下方說明
### Methods
**getFieldsValue**
類型:`() => Recordable;`
說明: 獲取表單值
**setFieldsValue**
類型:`<T>(values: T) => Promise<void>`
說明: 設置表單字段值
**resetFields**
類型:`()=> Promise<any>`
說明: 重置表單值
**validateFields**
類型:`(nameList?: NamePath[]) => Promise<any>`
說明: 校驗指定表單項
**validate**
類型:`(nameList?: NamePath[]) => Promise<any>`
說明: 校驗整個表單
**submit**
類型:`() => Promise<void>`
說明: 提交表單
**scrollToField**
類型:`(name: NamePath, options?: ScrollOptions) => Promise<void>`
說明: 滾動到對應字段位置
**clearValidate**
類型:`(name?: string | string[]) => Promise<void>`
說明: 清空校驗
**setProps**
TIP
設置表單的 props 可以直接在標簽上傳遞,也可以使用 setProps,或者初始化直接寫 useForm(props)
類型:`(formProps: Partial<FormProps>) => Promise<void>`
說明: 設置表單 Props
**removeSchemaByFiled**
類型:`(field: string | string[]) => Promise<void>`
說明: 根據 field 刪除 Schema
**appendSchemaByField**
類型:`( schema: FormSchema, prefixField: string | undefined, first?: boolean | undefined ) => Promise<void>`
說明: 插入到指定 filed 后面,如果沒傳指定 field,則插入到最后,當 first = true 時插入到第一個位置
**updateSchema**
類型:`(data: Partial<FormSchema> | Partial<FormSchema>[]) => Promise<void>`
說明: 更新表單的 schema, 只更新函數所傳的參數
e.g
~~~
updateSchema({ field: 'filed', componentProps: { disabled: true } });
updateSchema([
{ field: 'filed', componentProps: { disabled: true } },
{ field: 'filed1', componentProps: { disabled: false } },
]);
~~~
## Props
溫馨提醒
除以下參數外,官方文檔內的 props 也都支持,具體可以參考 [antv form](https://www.antdv.com/components/form-cn)
| 屬性 | 類型 | 默認值 | 可選值 | 說明 | 版本 |
| --- | --- | --- | --- | --- | --- |
| schemas | `Schema[]` | \- | \- | 表單配置,見下方`FormSchema`配置 | |
| submitOnReset | `boolean` | `false` | \- | 重置時是否提交表單 | |
| labelCol | Partial<ColEx> | \- | \- | 整個表單通用 LabelCol 配置 | |
| wrapperCol | Partial<ColEx> | \- | \- | 整個表單通用 wrapperCol 配置 | |
| baseColProps | Partial<ColEx> | \- | \- | 配置所有選子項的 ColProps,不需要逐個配置,子項也可單獨配置優先與全局 | |
| baseRowStyle | `object` | \- | \- | 配置所有 Row 的 style 樣式 | |
| labelWidth | number , string | \- | \- | 擴展 form 組件,增加 label 寬度,表單內所有組件適用,可以單獨在某個項覆蓋或者禁用 | |
| labelAlign | `string` | \- | `left`,`right` | label 布局 | |
| mergeDynamicData | `object` | \- | \- | 額外傳遞到子組件的參數 values | |
| autoFocusFirstItem | `boolean` | `false` | \- | 是否聚焦第一個輸入框,只在第一個表單項為 input 的時候作用 | |
| compact | `boolean` | `false` | `true/false` | 緊湊類型表單,減少 margin-bottom | |
| size | `string` | `default` | `'default' , 'small' , 'large'` | 向表單內所有組件傳遞 size 參數,自定義組件需自行實現 size 接收 | |
| disabled | `boolean` | `false` | `true/false` | 向表單內所有組件傳遞 disabled 屬性,自定義組件需自行實現 disabled 接收 | |
| autoSetPlaceHolder | `boolean` | `true` | `true/false` | 自動設置表單內組件的 placeholder,自定義組件需自行實現 | |
| autoSubmitOnEnter | `boolean` | `false` | `true/false` | 在input中輸入時按回車自動提交 | 2.4.0 |
| rulesMessageJoinLabel | `boolean` | `false` | `true/false` | 如果表單項有校驗,會自動生成校驗信息,該參數控制是否將字段中文名字拼接到自動生成的信息后方 | |
| showAdvancedButton | `boolean` | `false` | `true/false` | 是否顯示收起展開按鈕 | |
| emptySpan | number , Partial<ColEx> | 0 | \- | 空白行格,可以是數值或者 col 對象 數 | |
| autoAdvancedLine | `number` | 3 | \- | 如果 showAdvancedButton 為 true,超過指定行數行默認折疊 | |
| alwaysShowLines | `number` | 1 | \- | 折疊時始終保持顯示的行數 | 2.7.1 |
| showActionButtonGroup | `boolean` | `true` | `true/false` | 是否顯示操作按鈕(重置/提交) | |
| actionColOptions | `Partial<ColEx>` | \- | \- | 操作按鈕外層 Col 組件配置,如果開啟 showAdvancedButton,則不用設置,具體見下方 actionColOptions | |
| showResetButton | `boolean` | `true` | \- | 是否顯示重置按鈕 | |
| resetButtonOptions | `object` | | \- | 重置按鈕配置見下方 ActionButtonOption | |
| showSubmitButton | `boolean` | `true` | \- | 是否顯示提交按鈕 | |
| submitButtonOptions | `object` | | \- | 確認按鈕配置見下方 ActionButtonOption | |
| resetFunc | () => Promise<void> | | \- | 自定義重置按鈕邏輯`() => Promise<void>;` | |
| submitFunc | () => Promise<void> | | \- | 自定義提交按鈕邏輯`() => Promise<void>;` | |
| fieldMapToTime | [string, [string, string], string?][] | | \- | 用于將表單內時間區域的應設成 2 個字段,見下方說明 | |
### ColEx
見 [src/components/Form/src/types/index.ts](https://github.com/jeecgboot/jeecgboot-vue3/tree/master/src/components/Form/src/types/index.ts)
### ActionButtonOption
[BasicButtonProps](https://github.com/jeecgboot/jeecgboot-vue3/tree/master/src/components/Button/types.ts)
~~~
export interface ButtonProps extends BasicButtonProps {
text?: string;
}
~~~
### fieldMapToTime
將表單內時間區域的值映射成 2 個字段
如果表單內有時間區間組件,獲取到的值是一個數組,但是往往我們傳遞到后臺需要是 2 個字段
~~~
useForm({
fieldMapToTime: [
// data為時間組件在表單內的字段,startTime,endTime為轉化后的開始時間于結束時間
// 'YYYY-MM-DD'為時間格式,參考moment
['datetime', ['startTime', 'endTime'], 'YYYY-MM-DD'],
// 支持多個字段
['datetime1', ['startTime1', 'endTime1'], 'YYYY-MM-DD HH:mm:ss'],
],
});
// fieldMapToTime沒寫的時候表單獲取到的值
{
datetime: [Date(),Date()]
}
// ['datetime', ['startTime', 'endTime'], 'YYYY-MM-DD'],之后
{
datetime: [Date(),Date()],
startTime: '2020-08-12',
endTime: '2020-08-15',
}
~~~
### FormSchema
| 屬性 | 類型 | 默認值 | 可選值 | 說明 |
| --- | --- | --- | --- | --- |
| field | `string` | \- | \- | 字段名 |
| label | `string` | \- | \- | 標簽名 |
| subLabel | `string` | \- | \- | 二級標簽名灰色 |
| suffix | string , number , ((values: RenderCallbackParams) => string / number); | \- | \- | 組件后面的內容 |
| changeEvent | `string` | \- | \- | 表單更新事件名稱 |
| helpMessage | `string , string[]` | \- | \- | 標簽名右側溫馨提示 |
| helpComponentProps | `HelpComponentProps` | \- | \- | 標簽名右側溫馨提示組件 props,見下方 HelpComponentProps |
| labelWidth | `string , number` | \- | \- | 覆蓋統一設置的 labelWidth |
| disabledLabelWidth | `boolean` | false | true/false | 禁用 form 全局設置的 labelWidth,自己手動設置 labelCol 和 wrapperCol |
| component | `string` | \- | \- | 組件類型,見下方 ComponentType |
| componentProps | `any,()=>{}` | \- | \- | 所渲染的組件的 props |
| rules | `ValidationRule[]` | \- | \- | 校驗規則,見下方 ValidationRule |
| required | `boolean` | \- | \- | 簡化 rules 配置,為 true 則轉化成 \[{required:true}\]。`2.4.0`之前的版本只支持string類型的值 |
| rulesMessageJoinLabel | `boolean` | false | \- | 校驗信息是否加入 label |
| itemProps | `any` | \- | \- | 參考下方 FormItem |
| colProps | `ColEx` | \- | \- | 參考上方 actionColOptions |
| defaultValue | `object` | \- | \- | 所渲渲染組件的初始值 |
| render | (renderCallbackParams: RenderCallbackParams) => VNode / VNode[] / string | \- | \- | 自定義渲染組件 |
| renderColContent | (renderCallbackParams: RenderCallbackParams) => VNode / VNode[] / string | \- | \- | 自定義渲染組件(需要自行包含 formItem) |
| renderComponentContent | (renderCallbackParams: RenderCallbackParams) => any / string | \- | \- | 自定義渲染組內部的 slot |
| slot | `string` | \- | \- | 自定義 slot,渲染組件 |
| colSlot | `string` | \- | \- | 自定義 slot,渲染組件 (需要自行包含 formItem) |
| show | boolean / ((renderCallbackParams: RenderCallbackParams) => boolean) | \- | \- | 動態判斷當前組件是否顯示,css 控制,不會刪除 dom |
| ifShow | boolean / ((renderCallbackParams: RenderCallbackParams) => boolean) | \- | \- | 動態判斷當前組件是否顯示,js 控制,會刪除 dom |
| dynamicDisabled | boolean / ((renderCallbackParams: RenderCallbackParams) => boolean) | \- | \- | 動態判斷當前組件是否禁用 |
| dynamicRules | boolean / ((renderCallbackParams: RenderCallbackParams) => boolean) | \- | \- | 動態判返當前組件你校驗規則 |
**RenderCallbackParams**
~~~
export interface RenderCallbackParams {
schema: FormSchema;
values: any;
model: any;
field: string;
}
~~~
**componentProps**
* 當值為對象類型時,該對象將作為`component`所對應組件的的 props 傳入組件
* 當值為一個函數時候
參數有 4 個
`schema`: 表單的整個 schemas
`formActionType`: 操作表單的函數。與 useForm 返回的操作函數一致
`formModel`: 表單的雙向綁定對象,這個值是響應式的。所以可以方便處理很多操作
`tableAction`: 操作表格的函數,與 useTable 返回的操作函數一致。注意該參數只在表格內開啟搜索表單的時候有值,其余情況為`null`,
~~~
{
// 簡單例子,值改變的時候操作表格或者修改表單內其他元素的值
component:'Input',
componentProps: ({ schema, tableAction, formActionType, formModel }) => {
return {
// xxxx props
onChange:e=>{
const {reload}=tableAction
reload()
// or
formModel.xxx='123'
}
};
};
}
~~~
**HelpComponentProps**
~~~
export interface HelpComponentProps {
maxWidth: string;
// 是否顯示序號
showIndex: boolean;
// 文本列表
text: any;
// 顏色
color: string;
// 字體大小
fontSize: string;
icon: string;
absolute: boolean;
// 定位
position: any;
}
~~~
**ComponentType**
schema 內組件的可選類型
~~~
export type ComponentType =
| 'Input'
| 'InputGroup'
| 'InputPassword'
| 'InputSearch'
| 'InputTextArea'
| 'InputNumber'
| 'InputCountDown'
| 'Select'
| 'ApiSelect'
| 'TreeSelect'
| 'RadioButtonGroup'
| 'RadioGroup'
| 'Checkbox'
| 'CheckboxGroup'
| 'AutoComplete'
| 'Cascader'
| 'DatePicker'
| 'MonthPicker'
| 'RangePicker'
| 'WeekPicker'
| 'TimePicker'
| 'Switch'
| 'StrengthMeter'
| 'Upload'
| 'IconPicker'
| 'Render'
| 'Slider'
| 'Rate'
| 'Divider'; // v2.7.2新增
~~~
### Divider schema說明
`Divider`類型用于在`schemas`中占位,將會渲染成一個分割線(始終占一整行的版面),可以用于較長表單的版面分隔。請只將Divider類型的schema當作一個分割線,而不是一個常規的表單字段。
* **`Divider`僅在`showAdvancedButton`為false時才會顯示**(也就是說如果啟用了表單收起和展開功能,`Divider`將不會顯示)
* `Divider`使用`schema`中的`label`以及`helpMessage`來渲染分割線中的提示內容
* `Divider`可以使用`componentProps`來設置除`type`之外的props
* `Divider`不會渲染`AFormItem`,因此`schema`中除`label`、`componentProps`、`helpMessage`、`helpComponentProps`以外的屬性不會被用到
## 自行添加需要的組件類型
在`src/components/Form/src/componentMap.ts`內,添加需要的組件,并在上方**ComponentType**添加相應的類型 key
### 方式 1
這種寫法適用與適用頻率較高的組件
~~~
componentMap.set('componentName', 組件);
// ComponentType
export type ComponentType = xxxx | 'componentName';
~~~
### 方式 2
使用**useComponentRegister**進行注冊
這種寫法只能在當前頁使用,頁面銷毀之后會從 componentMap 刪除相應的組件
~~~
import { useComponentRegister } from '@/components/form/index';
import { StrengthMeter } from '@/components/strength-meter/index';
useComponentRegister('StrengthMeter', StrengthMeter);
~~~
提示
方式 2 出現的原因是為了減少打包體積,如果某個組件體積很大,用方式 1 的話可能會使首屏體積增加
### render
自定義渲染內容
~~~
<template>
<div class="m-4">
<BasicForm @register="register" @submit="handleSubmit" />
</div>
</template>
<script lang="ts">
import { defineComponent, h } from 'vue';
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
import { useMessage } from '/@/hooks/web/useMessage';
import { Input } from 'ant-design-vue';
const schemas: FormSchema[] = [
{
field: 'field1',
component: 'Input',
label: '字段1',
colProps: {
span: 8,
},
rules: [{ required: true }],
render: ({ model, field }) => {
return h(Input, {
placeholder: '請輸入',
value: model[field],
onChange: (e: ChangeEvent) => {
model[field] = e.target.value;
},
});
},
},
{
field: 'field2',
component: 'Input',
label: '字段2',
colProps: {
span: 8,
},
rules: [{ required: true }],
renderComponentContent: () => {
return {
suffix: () => 'suffix',
};
},
},
];
export default defineComponent({
components: { BasicForm },
setup() {
const { createMessage } = useMessage();
const [register, { setProps }] = useForm({
labelWidth: 120,
schemas,
actionColOptions: {
span: 24,
},
});
return {
register,
schemas,
handleSubmit: (values: any) => {
createMessage.success('click search,values:' + JSON.stringify(values));
},
setProps,
};
},
});
</script>
~~~
### slot
自定義渲染內容
提示
使用插槽自定義表單域時,請注意antdv有關FormItem的 [相關說明](https://www.antdv.com/components/form-cn/#API)。
~~~
<template>
<div class="m-4">
<BasicForm @register="register">
<template #customSlot="{ model, field }">
<a-input v-model:value="model[field]" />
</template>
</BasicForm>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'compatible-vue';
import { BasicForm, useForm } from '@/components/Form/index';
import { BasicModal } from '@/components/modal/index';
export default defineComponent({
name: 'FormDemo',
setup(props) {
const [register] = useForm({
labelWidth: 100,
actionColOptions: {
span: 24,
},
schemas: [
{
field: 'field1',
label: '字段1',
slot: 'customSlot',
},
],
});
return {
register,
};
},
});
</script>
~~~
### ifShow/show/dynamicDisabled
自定義顯示/禁用
~~~
<template>
<div class="m-4">
<BasicForm @register="register" />
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
const schemas: FormSchema[] = [
{
field: 'field1',
component: 'Input',
label: '字段1',
colProps: {
span: 8,
},
show: ({ values }) => {
return !!values.field5;
},
},
{
field: 'field2',
component: 'Input',
label: '字段2',
colProps: {
span: 8,
},
ifShow: ({ values }) => {
return !!values.field6;
},
},
{
field: 'field3',
component: 'DatePicker',
label: '字段3',
colProps: {
span: 8,
},
dynamicDisabled: ({ values }) => {
return !!values.field7;
},
},
];
export default defineComponent({
components: { BasicForm },
setup() {
const [register, { setProps }] = useForm({
labelWidth: 120,
schemas,
actionColOptions: {
span: 24,
},
});
return {
register,
schemas,
setProps,
};
},
});
</script>
~~~
* * *
見 [antv form](https://www.antdv.com/components/form-cn)
## Slots
| 名稱 | 說明 |
| --- | --- |
| formFooter | 表單底部區域 |
| formHeader | 表單頂部區域 |
| resetBefore | 重置按鈕前 |
| submitBefore | 提交按鈕前 |
| advanceBefore | 展開按鈕前 |
| advanceAfter | 展開按鈕后 |
## ApiSelect
遠程下拉加載組件,該組件可以用于學習參考如何自定義組件集成到 Form 組件內,將自定義組件交由 Form 去管理
### Usage
~~~
const schemas: FormSchema[] = [
{
field: 'field',
component: 'ApiSelect',
label: '字段',
},
];
~~~
### Props
| 屬性 | 類型 | 默認值 | 說明 |
| --- | --- | --- | --- |
| numberToString | `boolean` | `false` | 是否將`number`值轉化為`string` |
| api | ()=>Promise<{ label: string; value: string; disabled?: boolean }[]> | \- | 數據接口,接受一個 Promise 對象 |
| params | `object` | \- | 接口參數。此屬性改變時會自動重新加載接口數據 |
| resultField | `string` | \- | 接口返回的字段,如果接口返回數組,可以不填。支持`x.x.x`格式 |
| labelField | `string` | `label` | 下拉數組項內`label`顯示文本的字段,支持`x.x.x`格式 |
| valueField | `string` | `value` | 下拉數組項內`value`實際值的字段,支持`x.x.x`格式 |
| immediate | `boolean` | `true` | 是否立即請求接口,否則將在第一次點擊時候觸發請求 |
## ApiTreeSelect
遠程下拉樹加載組件,和`ApiSelect`類似,2.6.1以上版本
### Props
| 屬性 | 類型 | 默認值 | 說明 |
| --- | --- | --- | --- |
| api | ()=>Promise<{ label: string; value: string; children?: any[] }[]> | - | 數據接口,接受一個 Promise 對象 |
| params | `object` | \- | 接口參數。此屬性改變時會自動重新加載接口數據 |
| resultField | `string` | \- | 接口返回的字段,如果接口返回數組,可以不填。支持`x.x.x`格式 |
| immediate | `boolean` | `true` | 是否立即請求接口。 |
## RadioButtonGroup
Radio Button 風格的選擇按鈕
### Usage
~~~
const schemas: FormSchema[] = [
{
field: 'field',
component: 'RadioButtonGroup',
label: '字段',
},
];
~~~
### Props
| 屬性 | 類型 | 默認值 | 說明 |
| --- | --- | --- | --- |
| options | { label: string; value: string; disabled?: boolean }[] | - | 數據字段 |
### dynamicRules
必填校驗示例
~~~
dynamicRules: ({ model, schema }) => {
return [{ required: true, message: '請輸入角色!' }];
},
~~~
- 項目介紹
- 常見問題
- 開發環境準備
- 環境準備
- 啟動項目
- 切換Vue3路由
- 項目配置詳細說明
- 上線部署
- 快速構建&部署
- Docker鏡像啟動
- 項目配置
- 菜單配置
- 菜單緩存
- 積木報表菜單配置
- 首頁配置
- 國際化
- 菜單國際化
- 組件注冊
- 項目規范
- 跨域處理
- 樣式庫
- 圖標生成
- package依賴介紹
- 菜單TAB風格
- 備份文檔
- 詳細構建和配置
- 構建部署1.0
- 切換Mock接口
- 原生路由(作廢)
- 原生菜單(作廢)
- 頁面開啟緩存(作廢)
- 環境準備1.0
- 數據 mock&聯調
- UI組件
- Form 表單組件
- Table 表格
- Modal 彈窗
- Drawer 抽屜組件
- Icon 圖標組件
- Button 按鈕
- 更多基礎組件
- JSelectUser選擇用戶 ?
- JSelectPosition崗位選擇 ?
- JSelectDept部門選擇 ?
- JCheckbox ?
- JImportModal 列表導入彈窗組件
- JInput特殊查詢組件 ?
- JPopup彈窗選擇組件 ?
- JTreeSelect樹形下拉框 (異步加載) ?
- JAreaSelect 省市縣級聯組件
- JDictSelectTag 字典標簽 ?
- JEllipsis 超長截取顯示組件 ?
- JUpload 上傳組件 ?
- JEasyCron 定時表達式選擇組件 ?
- JInputPopup 多行輸入窗口組件 ?
- JSwitch 開關選擇組件 ?
- JTreeDict 分類字典樹形下拉組件 ?
- JSelectInput 可輸入下拉框 ?
- JEditor 富文本編輯器 ?
- JMarkdownEditor Markdown編輯器 ?
- JSearchSelect 字典表的搜索組件 ?
- JSelectUserByDept 根據部門選擇用戶 ?
- JVxeTable
- 組件配置文檔
- 自定義組件
- 封裝自定義組件
- 自定義組件增強
- 多級聯動配置
- 使用示例
- 常見問題解答
- JAreaLinkage 省市縣聯動組件 ?
- JCategorySelect 分類字典樹 ?
- JImageUpload 圖片上傳 ?
- JSelectMultiple 下拉多選 ?
- JSelectRole 選擇角色 ?
- JFormContainer 表單組件禁用 ?
- SuperQuery 高級查詢
- UserSelect 高級用戶選擇組件
- Basic
- Page
- Authority
- PopConfirmButton
- CollapseContainer
- ScrollContainer
- LazyContainer
- CodeEditor
- JsonPreview
- CountDown
- ClickOutSide
- CountTo
- Cropper
- Description
- FlowChart
- Upload
- Tree
- Excel
- Qrcode
- Markdown
- Loading
- Tinymce
- Time
- StrengthMeter
- Verify
- Transition
- VirtualScroll
- ContextMenu
- Preview
- Loading
- 前端權限
- 表單權限
- 顯隱控制 ?
- 禁用控制 ?
- 列表權限
- 按鈕權限控制
- 列字段顯隱控制
- 行編輯組件權限
- 顯隱控制
- 禁用控制
- 代碼生成
- Online在線代碼生成
- GUI代碼生成
- 代碼生成模板介紹
- vue3和vue3Native詳細說明
- 深入開發
- 定義Form新組件
- 自定義列表查詢
- 自定義表單布局
- 開發筆記
- 組件權限控制
- 使用Antd Vue原生Form
- 自定義圖表組件
- 自定義渲染函數
- 如何編寫mock接口
- 緩存用法
- 精簡版代碼制作
- 微前端(qiankun)集成
- 前端小技巧
- 表單整體禁用
- 彈框內下拉框錯位
- 界面如何設置響應式
- 抽屜(Drawer)寬度自適應
- 生成菜單腳本
- Online表單
- Online常見問題
- Online表單配置
- 配置參數說明
- 系統標準字段
- 表單類型-主子表|樹表
- 自定義查詢配置
- Online表單風格
- Online表單刪除說明
- Online聯合查詢配置
- online表單視圖功能說明
- Online表單開啟評論
- Online表單控件介紹
- 常用基礎控件
- 高級關聯記錄
- Online表單控件配置
- 基本配置
- 控件擴展配置
- 默認值表達式
- 自定義查詢配置
- 字段href
- 默認值(填值規則)
- 導入導出自定義規則
- Online表單權限配置
- 字段權限配置與授權
- 按鈕權限配置與授權
- 數據權限配置與授權
- 聯合查詢數據權限規則說明
- 在線增強
- 自定義按鈕
- SQL增強
- JS增強
- 按鈕觸發JS增強
- 列表Api
- 列表操作列前置事件
- 表單Api
- beforeSubmit事件
- loaded事件
- 表單值改變事件【單表/主表】
- 表單值改變事件【從表】
- 表單值改變事件【從改主】
- 控制字段顯示與隱藏
- js增強實現下拉聯動
- js增強控制下拉樹數據
- JS增強 觸發彈窗
- JS增強 http請求
- JS增強 方法定義
- 對接表單設計器后需注意
- JAVA增強
- 快速開始
- Online java增強 導入
- Online java增強 導出
- Online java增強 查詢
- Online Java增強 http-api
- 表單類
- 列表類
- 其他功能示例
- 導入數據庫表支持排除表
- 通過字段Href實現三級聯動
- excel數據導入支持校驗
- Online報表
- Online報表配置
- 配置成菜單
- 其他功能
- 推送消息
- ISO 8601書寫格式
- 系統消息跳轉至詳情表單
- 菜單【批量申請(自定義)】功能說明
- Online自動化測試
- online AI自動化測試數據制作
- Online AI自動化測試數據制作
- Online AI模型測試用例功能詳情
- JAVA后臺功能
- saas多租戶切換
- 新功能實現saas租戶隔離
- 第三方集成
- 敲敲云集成釘釘