Table 表格 · JeecgBoot Vue3前端文檔

# 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 傳值覆蓋