# Table 表格
對`antv`的 table 組件進行封裝
> 如果文檔內沒有,可以嘗試在在線示例內尋找
>
[TOC]
## Usage
### 示例
~~~
<template>
<div class="p-4">
<BasicTable
title="基礎示例"
titleHelpMessage="溫馨提醒"
:columns="columns"
:dataSource="data"
:canResize="canResize"
:loading="loading"
:striped="striped"
:bordered="border"
:pagination="{ pageSize: 20 }"
>
<template #toolbar>
<a-button type="primary"> 操作按鈕 </a-button>
</template>
</BasicTable>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { BasicTable } from '/@/components/Table';
import { getBasicColumns, getBasicData } from './tableData';
export default defineComponent({
components: { BasicTable },
setup() {
return {
columns: getBasicColumns(),
data: getBasicData(),
};
},
});
</script>
~~~
### template 示例
所有可調用函數見下方`Methods`說明
~~~
<template>
<div class="p-4">
<BasicTable
:canResize="false"
title="RefTable示例"
titleHelpMessage="使用Ref調用表格內方法"
ref="tableRef"
:api="api"
:columns="columns"
rowKey="id"
:rowSelection="{ type: 'checkbox' }"
/>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, unref } from 'vue';
import { BasicTable, TableActionType } from '/@/components/Table';
import { getBasicColumns, getBasicShortColumns } from './tableData';
import { demoListApi } from '/@/api/demo/table';
export default defineComponent({
components: { BasicTable },
setup() {
const tableRef = ref<Nullable<TableActionType>>(null);
function getTableAction() {
const tableAction = unref(tableRef);
if (!tableAction) {
throw new Error('tableAction is null');
}
return tableAction;
}
function changeLoading() {
getTableAction().setLoading(true);
setTimeout(() => {
getTableAction().setLoading(false);
}, 1000);
}
return {
tableRef,
api: demoListApi,
columns: getBasicColumns(),
changeLoading,
};
},
});
</script>
~~~
### BasicColumn 和 tableAction 通過權限和業務控制顯示隱藏的示例
~~~
<template>
<div class="p-4">
<BasicTable @register="registerTable">
<template #action="{ record }">
<TableAction
:actions="[
{
label: '編輯',
onClick: handleEdit.bind(null, record),
auth: 'other', // 根據權限控制是否顯示: 無權限,不顯示
},
{
label: '刪除',
icon: 'ic:outline-delete-outline',
onClick: handleDelete.bind(null, record),
auth: 'super', // 根據權限控制是否顯示: 有權限,會顯示
},
]"
:dropDownActions="[
{
label: '啟用',
popConfirm: {
title: '是否啟用?',
confirm: handleOpen.bind(null, record),
},
ifShow: (_action) => {
return record.status !== 'enable'; // 根據業務控制是否顯示: 非enable狀態的不顯示啟用按鈕
},
},
{
label: '禁用',
popConfirm: {
title: '是否禁用?',
confirm: handleOpen.bind(null, record),
},
ifShow: () => {
return record.status === 'enable'; // 根據業務控制是否顯示: enable狀態的顯示禁用按鈕
},
},
{
label: '同時控制',
popConfirm: {
title: '是否動態顯示?',
confirm: handleOpen.bind(null, record),
},
auth: 'super', // 同時根據權限和業務控制是否顯示
ifShow: () => {
return true; // 根據業務控制是否顯示
},
},
]"
/>
</template>
</BasicTable>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
import { demoListApi } from '/@/api/demo/table';
const columns: BasicColumn[] = [
{
title: '姓名',
dataIndex: 'name',
auth: 'test', // 根據權限控制是否顯示: 無權限,不顯示
},
{
title: '地址',
dataIndex: 'address',
auth: 'super', // 同時根據權限控制是否顯示
ifShow: (_column) => {
return true; // 根據業務控制是否顯示
},
},
];
export default defineComponent({
components: { BasicTable, TableAction },
setup() {
const [registerTable] = useTable({
title: 'TableAction組件及固定列示例',
api: demoListApi,
columns: columns,
bordered: true,
actionColumn: {
width: 250,
title: 'Action',
dataIndex: 'action',
slots: { customRender: 'action' },
},
});
function handleEdit(record: Recordable) {
console.log('點擊了編輯', record);
}
function handleDelete(record: Recordable) {
console.log('點擊了刪除', record);
}
function handleOpen(record: Recordable) {
console.log('點擊了啟用', record);
}
return {
registerTable,
handleEdit,
handleDelete,
handleOpen,
};
},
});
</script>
~~~
## useTable
使用組件自帶的**useTable**可以方便使用表單
下面是一個使用簡單表格的示例,
~~~
<template>
<BasicTable @register="registerTable" />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicTable, useTable } from '/@/components/Table';
import { getBasicColumns, getBasicShortColumns } from './tableData';
import { demoListApi } from '/@/api/demo/table';
export default defineComponent({
components: { BasicTable },
setup() {
const [
registerTable,
{
setLoading,
},
] = useTable({
api: demoListApi,
columns: getBasicColumns(),
});
function changeLoading() {
setLoading(true);
setTimeout(() => {
setLoading(false);
}, 1000);
}
}
return {
registerTable,
changeLoading,
};
},
});
</script>
~~~
### Usage
用于調用 Table 內部方法及 table 參數配置
~~~
// 表格的props也可以直接注冊到useTable內部
const [register, methods] = useTable(props);
~~~
**register**
register 用于注冊 useTable,如果需要使用`useTable`提供的 api,必須將 register 傳入組件的 onRegister
~~~
<template>
<BasicTable @register="register" />
</template>
<script>
export default defineComponent({
components: { BasicForm },
setup() {
const [register] = useTable();
return { register };
},
});
</script>
~~~
### Methods
**setProps**
類型:`(props: Partial<BasicTableProps>) => void`
說明: 用于設置表格參數
**reload**
類型:`(opt?: FetchParams) => Promise<void>`
說明: 刷新表格
**redoHeight**
類型:`() => void`
說明: 重新計算表格高度
**setLoading**
類型:`(loading: boolean) => void`
說明: 設置表格 loading 狀態
**getDataSource**
獲取表格數據
類型:`<T = Recordable>() => T[]`
說明: 獲取表格數據
**getRawDataSource**
獲取后端接口原始數據
類型:`<T = Recordable>() => T`
說明: 獲取后端接口原始數據
**getColumns**
類型:`(opt?: GetColumnsParams) => BasicColumn[]`
說明: 獲取表格數據
**setColumns**
類型:`(columns: BasicColumn[] | string[]) => void`
說明: 設置表頭數據
**setTableData**
類型:`<T = Recordable>(values: T[]) => void`
說明: 設置表格數據
**setPagination**
類型:`(info: Partial<PaginationProps>) => void`
說明: 設置分頁信息
**deleteSelectRowByKey**
類型:`(key: string) => void`
說明: 根據 key 刪除取消選中行
**getSelectRowKeys**
類型:`() => string[]`
說明: 獲取選中行的 keys
**getSelectRows**
類型:`<T = Recordable>() => T[]`
說明: 獲取選中行的 rows
**clearSelectedRowKeys**
類型:`() => void`
說明: 清空選中行
**setSelectedRowKeys**
類型:`(rowKeys: string[] | number[]) => void`
說明: 設置選中行
**getPaginationRef**
類型:`() => PaginationProps | boolean`
說明: 獲取當前分頁信息
**getShowPagination**
類型:`() => boolean`
說明: 獲取當前是否顯示分頁
**setShowPagination**
類型:`(show: boolean) => Promise<void>`
說明: 設置當前是否顯示分頁
**getRowSelection**
類型:`() => TableRowSelection<Recordable>`
說明: 獲取勾選框信息
**updateTableData**
類型:`(index: number, key: string, value: any)=>void`
說明: 更新表格數據
**updateTableDataRecord**
類型:`(rowKey: string | number, record: Recordable) => Recordable | void`
說明: 根據唯一的`rowKey`更新指定行的數據.可用于不刷新整個表格而局部更新數據
**deleteTableDataRecord**
類型:`(rowKey: string | number | string[] | number[]) => void`
說明: 根據唯一的`rowKey`動態刪除指定行的數據.可用于不刷新整個表格而局部更新數據
**insertTableDataRecord**
類型:`(record: Recordable, index?: number) => Recordable | void`
說明: 可根據傳入的`index`值決定插入數據行的位置,不傳則是順序插入,可用于不刷新整個表格而局部更新數據
**getForm**
類型:`() => FormActionType`
說明: 如果開啟了搜索區域。可以通過該函數獲取表單對象函數進行操作
**expandAll**
類型:`() => void`
說明: 展開樹形表格
**collapseAll**
類型:`() => void`
說明: 折疊樹形表格
## Props
溫馨提醒
* 除以下參數外,官方文檔內的 props 也都支持,具體可以參考 [antv table](https://www.antdv.com/components/table-cn#API)
* 注意:`defaultExpandAllRows`、`defaultExpandedRowKeys`屬性在basicTable中不受支持,并且在`antv table`v2.2.0之后也被移除。
| 屬性 | 類型 | 默認值 | 可選值 | 說明 | 版本 |
| --- | --- | --- | --- | --- | --- |
| clickToRowSelect | `boolean` | `true` | \- | 點擊行是否選中 checkbox 或者 radio。需要開啟 | |
| sortFn | `(sortInfo: SorterResult<any>) => any` | \- | \- | 自定義排序方法。見下方全局配置說明 | |
| filterFn | `(sortInfo: Partial<Recordable<string[]>>) => any` | \- | \- | 自定義過濾方法。見下方全局配置說明 | |
| showTableSetting | `boolean` | `false` | \- | 顯示表格設置工具 | |
| tableSetting | `TableSetting` | \- | \- | 表格設置工具配置,見下方 TableSetting | |
| striped | `boolean` | `true` | \- | 斑馬紋 | |
| inset | `boolean` | `false` | \- | 取消表格的默認 padding | |
| autoCreateKey | `boolean` | `true` | \- | 是否自動生成 key | |
| showSummary | `boolean` | `false` | \- | 是否顯示合計行 | |
| summaryData | `any[]` | \- | \- | 自定義合計數據。如果有則顯示該數據 | |
| emptyDataIsShowTable | `boolean` | `true` | \- | 在啟用搜索表單的前提下,是否在表格沒有數據的時候顯示表格 | |
| summaryFunc | `(...arg) => any[]` | \- | \- | 計算合計行的方法 | |
| ~canRowDrag~ | ~`boolean`~ | ~`false`~ | \- | ~是否可拖拽行排序~ | |
| ~canColDrag~ | ~`boolean`~ | ~`false`~ | \- | ~是否可拖拽列~ | |
| isTreeTable | `boolean` | `false` | \- | 是否樹表 | |
| api | `(...arg: any) => Promise<any>` | \- | \- | 請求接口,可以直接將`src/api內的函數直接傳入` | |
| beforeFetch | `(T)=>T` | \- | \- | 請求之前對參數進行處理 | |
| afterFetch | `(T)=>T` | \- | \- | 請求之后對返回值進行處理 | |
| handleSearchInfoFn | `(T)=>T` | \- | \- | 開啟表單后,在請求之前處理搜索條件參數 | |
| fetchSetting | `FetchSetting` | \- | \- | 接口請求配置,可以配置請求的字段和響應的字段名,見下方全局配置說明 | |
| immediate | `boolean` | `true` | \- | 組件加載后是否立即請求接口,在 api 有傳的情況下,如果為 false,需要自行使用 reload 加載表格數據 | |
| searchInfo | `any` | \- | \- | 額外的請求參數 | |
| useSearchForm | `boolean` | false | \- | 使用搜索表單 | |
| formConfig | `any` | \- | \- | 表單配置,參考表單組件的 Props | |
| columns | `any` | \- | \- | 表單列信息 BasicColumn\[\] | |
| showIndexColumn | `boolean` | ture | \- | 是否顯示序號列 | |
| indexColumnProps | `any` | \- | \- | 序號列配置 BasicColumn | |
| actionColumn | `any` | \- | \- | 表格右側操作列配置 BasicColumn | |
| ellipsis | `boolean` | `true` | \- | 文本超過寬度是否顯示... | |
| canResize | `boolean` | `true` | \- | 是否可以自適應高度(如果置于PageWrapper組件內,請勿啟用PageWrapper的fixedHeight屬性,二者不可同時使用) | |
| clearSelectOnPageChange | `boolean` | false | \- | 切換頁碼是否重置勾選狀態 | |
| resizeHeightOffset | `number` | 0 | \- | 表格自適應高度計算結果會減去這個值 | |
| rowSelection | `any` | \- | \- | 選擇列配置 | |
| title | `string` | \- | \- | 表格標題 | |
| titleHelpMessage | `string | string[]` | \- | \- | 表格標題右側溫馨提醒 | |
| maxHeight | `number` | \- | \- | 表格最大高度,超出會顯示滾動條 | |
| dataSource | `any[]` | \- | \- | 表格數據,非 api 加載情況 | |
| bordered | `boolean` | `false` | \- | 是否顯示表格邊框 | |
| pagination | `any` | \- | \- | 分頁信息配置,為`false`不顯示分頁 | |
| loading | `boolean` | `false` | \- | 表格 loading 狀態 | |
| scroll | `any` | \- | \- | 參考官方文檔 scroll | |
| beforeEditSubmit | `({record: Recordable,index: number,key: string | number,value: any}) => Promise<any>` | \- | \- | 單元格編輯狀態提交回調,返回false將阻止單元格提交數據到table。該回調在行編輯模式下無效。 | 2.7.2 |
### TableSetting
~~~
{
// 是否顯示刷新按鈕
redo?: boolean;
// 是否顯示尺寸調整按鈕
size?: boolean;
// 是否顯示字段調整按鈕
setting?: boolean;
// 是否顯示全屏按鈕
fullScreen?: boolean;
}
~~~
## BasicColumn
除 參考官方 [Column 配置](https://www.antdv.com/components/table-cn#API) 外,擴展以下參數
| 屬性 | 類型 | 默認值 | 可選值 | 說明 |
| --- | --- | --- | --- | --- |
| defaultHidden | `boolean` | false | \- | 默認隱藏,可在列配置顯示 |
| helpMessage | `string|string[]` | \- | \- | 列頭右側幫助文本 |
| edit | `boolean` | \- | \- | 是否開啟單元格編輯 |
| editRow | `boolean` | \- | \- | 是否開啟行編輯 |
| editable | `boolean` | false | \- | 是否處于編輯狀態 |
| editComponent | `ComponentType` | `Input` | \- | 編輯組件 |
| editComponentProps | `any` | \- | \- | 對應編輯組件的 props |
| editRule | `((text: string, record: Recordable) => Promise<string>)` | \- | \- | 對應編輯組件的表單校驗 |
| editValueMap | `(value: any) => string` | \- | \- | 對應單元格值枚舉 |
| onEditRow | `()=>void` | \- | \- | 觸發行編輯 |
| format | `CellFormat` | \- | \- | 單元格格式化 |
| auth | `RoleEnum`|`RoleEnum[]`|`string`|`string[]` | \- | \- | 根據權限編碼來控制當前列是否顯示 |
| ifShow | `boolean | ((action: ActionItem) => boolean)` | \- | \- | 根據業務狀態來控制當前列是否顯示 |
### EditComponentType
~~~
export type ComponentType =
| 'Input'
| 'InputNumber'
| 'Select'
| 'ApiSelect'
| 'Checkbox'
| 'Switch'
| 'DatePicker' // v2.5.0 以上
| 'TimePicker'; // v2.5.0 以上
~~~
### CellFormat
~~~
export type CellFormat =
| string
| ((text: string, record: Recordable, index: number) => string | number)
| Map<string | number, any>;
~~~
## 事件
溫馨提醒
除以下事件外,官方文檔內的 event 也都支持,具體可以參考 [antv table](https://www.antdv.com/components/table-cn#API)
| 事件 | 回調參數 | 說明 |
| --- | --- | --- |
| fetch-success | `Function({items,total})` | 接口請求成功后觸發 |
| fetch-error | `Function(error)` | 錯誤信息 |
| selection-change | `Function({keys,rows})` | 勾選事件觸發 |
| row-click | `Function(record, index, event)` | 行點擊觸發 |
| row-dbClick | `Function(record, index, event)` | 行雙擊觸發 |
| row-contextmenu | `Function(record, index, event)` | 行右鍵觸發 |
| row-mouseenter | `Function(record, index, event)` | 行移入觸發 |
| row-mouseleave | `Function(record, index, event)` | 行移出觸發 |
| edit-end | `Function({record, index, key, value})` | 單元格編輯完成觸發 |
| edit-cancel | `Function({record, index, key, value})` | 單元格取消編輯觸發 |
| edit-row-end | `Function()` | 行編輯結束觸發 |
| edit-change | `Function({column,value,record})` | 單元格編輯組件的 value 發生變化時觸發 |
edit-change 說明
從版本`2.4.2`起,對于`edit-change`事件,`record`中的`editValueRefs`裝載了當前行的所有編輯組件(如果有的話)的值的`ref`對象,可用于處理同一行中的編輯組件的聯動。請看下面的例子
~~~
function onEditChange({ column, record }) {
// 當同一行的單價或者數量發生變化時,更新合計金額(三個數據均為當前行編輯組件的值)
if (column.dataIndex === 'qty' || column.dataIndex === 'price') {
const { editValueRefs: { total, qty, price } } = record;
total.value = unref(qty) * unref(price);
}
}
~~~
## Slots
溫馨提醒
除以下參數外,官方文檔內的 slot 也都支持,具體可以參考 [antv table](https://www.antdv.com/components/table-cn#API)
| 名稱 | 說明 | 版本 |
| --- | --- | --- |
| tableTitle | 表格頂部左側區域 | |
| toolbar | 表格頂部右側區域 | |
| expandedRowRender | 展開行區域 | |
| headerTop | 表格頂部區域(標題上方) | 2.6.1 |
## Form-Slots
當開啟 form 表單后。以`form-xxxx`為前綴的 slot 會被視為 form 的 slot
xxxx 為 form 組件的 slot。具體參考 [form 組件文檔](https://vvbin.cn/doc-next/components/form.html#Slots)
e.g
~~~
form-submitBefore
~~~
## 內置組件(只能用于表格內部)
### TableAction
用于表格右側操作列渲染
#### Props
| 屬性 | 類型 | 默認值 | 可選值 | 說明 | 版本 |
| --- | --- | --- | --- | --- | --- |
| actions | `ActionItem[]` | \- | \- | 右側操作列按鈕列表 | |
| dropDownActions | `ActionItem[]` | \- | \- | 右側操作列更多下拉按鈕列表 | |
| stopButtonPropagation | `boolean` | `false` | `true/false` | 是否阻止操作按鈕的click事件冒泡 | 2.5.0 |
**ActionItem**
~~~
export interface ActionItem {
// 按鈕文本
label: string;
// 是否禁用
disabled?: boolean;
// 按鈕顏色
color?: 'success' | 'error' | 'warning';
// 按鈕類型
type?: string;
// button組件props
props?: any;
// 按鈕圖標
icon?: string;
// 氣泡確認框
popConfirm?: PopConfirm;
// 是否顯示分隔線,v2.0.0+
divider?: boolean;
// 根據權限編碼來控制當前列是否顯示,v2.4.0+
auth?: RoleEnum | RoleEnum[] | string | string[];
// 根據業務狀態來控制當前列是否顯示,v2.4.0+
ifShow?: boolean | ((action: ActionItem) => boolean);
// 點擊回調
onClick?: Fn;
// Tooltip配置,2.5.3以上版本支持,可以配置為string,或者完整的tooltip屬性
tooltip?: string | TooltipProps
}
~~~
有關TooltipProps的說明,請參考[tooltip](https://www.antdv.com/components/tooltip-cn#API)
**PopConfirm**
~~~
export interface PopConfirm {
title: string;
okText?: string;
cancelText?: string;
confirm: Fn;
cancel?: Fn;
icon?: string;
}
~~~
### TableImg
用于渲染單元格圖片,支持圖片預覽
#### Props
| 屬性 | 類型 | 默認值 | 可選值 | 說明 | 版本 |
| --- | --- | --- | --- | --- | --- |
| imgList | `string[]` | \- | \- | 圖片地址列表 | |
| size | `number` | \- | \- | 圖片大小 | |
| simpleShow | `boolean` | `false` | `true/false` | 簡單顯示模式(只顯示第一張圖片) | 2.5.0 |
| showBadge | `boolean` | `true` | `true/false` | 簡單模式下是否顯示計數Badge | 2.5.0 |
| margin | `number` | 4 | \- | 常規模式下的圖片間距 | 2.5.0 |
| srcPrefix | `string` | \- | \- | 在每一個圖片src前插入的內容 | 2.5.0 |
## 全局配置
在 [componentsSettings](https://github.com/jeecgboot/jeecgboot-vue3/blob/master/src/settings/componentSetting.ts) 可以配置全局參數。用于統一整個項目的風格。可以通過 props 傳值覆蓋
- 項目介紹
- 常見問題
- 開發環境準備
- 環境準備
- 啟動項目
- 切換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租戶隔離
- 第三方集成
- 敲敲云集成釘釘