# JVXETable 文檔 [TOC=2,3] >[info] `JVXETable`基于`vxe-table`組件開發，請參見：[vxe-table 官方文檔](https://vxetable.cn) ## 參數配置 ### 基礎參數配置 | 參數 | 類型 | 默認值 | 說明 | | --- | --- | --- | --- | | columns | array | \[\] | **【必填】** 表格列的配置描述，詳見【columns 參數配置】 | | dataSource | array | \[\] | **【必填】** 表格數據 | | size | string | 'medium' | 表格尺寸，可選值有：'medium'、 'small'、 'mini' | | loading | boolean | false | 是否正在加載 | | height | number, string | 'auto' | 表格的固定高度，如果是string就只能填'auto'，代表自適應高度 | | maxHeight | number | null | 設定最大高度(px)，默認null不限定最大高度 | | disabled | boolean | false | 是否禁用全部組件 | | bordered | boolean | false | 是否顯示單元格豎向邊框線 | | toolbar | boolean | false | 是否顯示工具欄 | | toolbarConfig | object | {slot: \['prefix', 'suffix'\], btn: \['add', 'remove', 'clearSelection'\]} | 工具欄配置 | | rowNumber | boolean | false | 是否顯示行號 | | rowSelection | boolean | false | 是否可選擇行 | | rowSelectionType | string | 'checkbox' | 選擇行類型， 可選值：'checkbox'、 'radio' | | rowExpand | boolean | false | 是否可展開行 | | expandConfig | object | {} | 展開行配置 | | disabledRows | object | {} | 禁用行配置 | | dragSort | boolean | false | 是否可拖拽排序（有固定列的情況下無法拖拽排序，僅可上下排序） | | sortKey | string | 'orderNum' | 排序字段保存的Key | | sortBegin | number | 0 | 排序序號開始值 | | pagination | object | {} | 分頁器參數，設置了即可顯示分頁器，詳見（[APagination分頁](https://antdv.com/components/pagination-cn/#API)） | | clickRowShowSubForm | boolean | false | 點擊行時是否顯示子表單 | | clickRowShowMainForm | boolean | false | 點擊行時是否顯示主表單 | | clickSelectRow | boolean | false | 是否點擊選中行，優先級最低 | | reloadEffect | boolean | false | 是否開啟 reload 數據效果 | | editRules | object | {} | 校驗規則 | | asyncRemove | boolean | false | 是否異步刪除行，如果你要實現異步刪除，那么需要把這個選項開啟；在remove事件里調用confirmRemove方法才會真正刪除（除非刪除的全是新增的行） | | authPre | string | '' | 配置按鈕/列權限，通常規則是\[前綴:列編碼\]或\[前綴:btn:按鈕編碼\] 如`vxe:btn:add`（設置新增按鈕的權限）；`vxe:name`（設置name列的權限）。<br>如果果需要在該table上作權限控制，就需要配置此屬性為權限編碼的前綴 ，此例中為`jvxeauth` | | linkageConfig | array | \[\] | 多級聯動配置，詳見[【多級聯動配置】](JVxeTable/多級聯動配置.md) | | socketReload | boolean | false | 是否開啟使用 webSocket 無痕刷新 | | socketKey | string | 'vxe-default' | 相同的socketKey更改時會互相刷新 | | addSetActive | boolean | true | 新增行時切換行的激活狀態 | >[info] [更多配置詳見VXETable文檔](https://vxetable.cn/#/table/api) ### columns 參數配置 | 參數 | 類型 | 說明 | | --- | --- | --- | | key | string | **【必填】** 列數據在數據項中對應的`key`，必須是**唯一**的 | | title | string | 表格列頭顯示的標題 | | type | string | 表單的類型，可以通過`JVxeTypes`賦值（詳見：[【組件配置文檔】](JVXETable/組件配置文檔.md)） | | fixed | string | left（固定左側）, right（固定右側） | | width | string | 列的寬度,`px`、`%` | | minWidth | | 最小列寬度，`px`、`%`；會自動將剩余空間按比例分配 | | align | string | 列對齊方式 left（左對齊）, center（居中對齊）, right（右對齊） | | placeholder | string | 表單預期值的提示信息，可以使用`${...}`變量替換文本（詳見【常見問題\_${...} 變量如何使用】） | | defaultValue | string | 默認值，在新增一行時生效 | | props | object | 設置添加給表單元素的自定義屬性，例如:`props:{title: 'show title'}` | | disabled | boolean | 是否禁用當前列，默認false | | validateRules | array | 表單驗證規則，配置方式見【validateRules 配置規則】 | | formatter | Function({cellValue, row, column}) | 格式化顯示內容，將處理后的值返回即可。注：僅影響展示的值，不會修改實際的值，也就是說，在獲取和點擊編輯時不會受影響 | ### validateRules 配置規則 `validateRules`需要的是一個數組，數組里每項都是一個規則，規則是object類型，規則的各個參數如下 * `required`是否必填，可選值為`true`or`false` * `unique`唯一校驗，不可重復，可選值為`true`or`false` * `pattern`正則表達式驗證，只有成功匹配該正則的值才能成功通過驗證 * `handler`自定義函數校驗，使用方法請見【使用示例\_五】) * `message`當驗證未通過時顯示的提示文本，可以使用`${...}`變量替換文本（詳見【常見問題\_${...} 變量如何使用】） * 配置示例請看【使用示例\_二】 ## 事件 ### save * `觸發時機`：只有點擊`保存`按鈕時才會觸發 ### added * `觸發時機`：點擊`新增`按鈕、調用`addRows`方法時會觸發 * `攜帶參數`： * `row`：添加完成后的行 * `rows`：如果添加了多行，將返回此參數 > 如果調用`addRows`方法添加多行，則每添加一行都會觸發一次該事件 ### inserted * `觸發時機`：調用`insertRows`方法時會觸發 * `攜帶參數`： * `row`：插入完成后的行 * `rows`：如果插入了多行，將返回此參數 * `insertIndex`：插入的下標 > 如果調用`insertRows`方法添加多行，則每添加一行都會觸發一次該事件 ### removed * `觸發時機`：點擊`刪除`按鈕、調用`removeRows`方法時會觸發 * `攜帶參數`： * `deleteRows`：即將被刪除的行 * `confirmRemove`：確認刪除方法 只有當點擊`刪除`按鈕，并且開啟了asyncRemove屬性后才會返回 > 如果`asyncRemove`參數設為true，則會傳遞`confirmRemove`方法，否者不會，且只有調用了該方法后才會真正刪除（除非刪除的全是新增的行） > 如果`asyncRemove`參數設為false，就會直接刪除行，而不用調用`confirmRemove`。 ### dragged * `觸發時機`：拖拽排序后、上下移動后觸發 * `攜帶參數`： * ` oldIndex`：排序前的 index * `newIndex`：排序后的 index ### selectRowChange * `觸發時機`：當行被選中或取消選中時觸發 * `攜帶參數`： * `type`：選中類型 * `radio`：單選 * `checkbox`：多選 * `action`：選中操作 * `selected`：選中 * `unselected`：取消選中 * `selected-all`：全選 * `row`：當前操作的行（全選時沒有該參數） * `selectedRows`：所有被選中的行 * `selectedRowIds`：所有被選中的行的ID * `$event`：原生事件 ### pageChange * `觸發時機`：當分頁參數被改變時觸發 * `攜帶參數`： * `current`：當前頁碼 * `pageSize`：當前頁大小 ### valueChange * `觸發時機`：當數據發生改變的時候觸發的事件 * `攜帶參數`： * `type`：組件類型（JVXETypes中定義的類型） * `value`：新值 * `oldValue`：舊值 * `row`：當前行 * `col`：當前列 * `column`：當前列配置 * `rowIndex`：當前行下標 * `columnIndex`：當前列下標 * `cellTarget`：當前組件實例 * `isSetValues`：為`true`則代表是通過`setValues`方法觸發的事件 > **特別注意：** 如果是通過`setValues`方法觸發的事件，將不會傳遞`row`、`rowIndex`、`columnIndex`、`cellTarget`這幾個參數的。 ## 方法 ### getXTable 獲取 vxe-table 實例，用于調用 vxe-table 的原生方法，詳見：[VxeTable文檔](https://vxetable.cn/#/grid/api?filterName=methods) ### addRows * `說明`：添加一行或多行臨時數據，會填充默認值，總是會激活添加的最后一行的編輯模式 * `參數`： * `rows`：\[object | array\] 要添加的行 * `options`：object 選項參數 * `setActive`：是否激活添加的最后一行的編輯模式，默認繼承props.addSetActive * `返回值`：Promise ### pushRows * `說明`：添加一行或多行臨時數據，不會填充默認值，傳什么就添加進去什么 * `參數`： * `rows`：\[object | array\] 要添加的行 * `options`：object 選項參數 * `index`：默認-1，插入位置，-1為最后一行 * `setActive`：默認false，是否激活添加的最后一行的編輯模式 * `返回值`：Promise ### resetScrollTop * `說明`：重置滾動條Top位置 * `參數`： * `top`：number 新top位置，留空則滾動到上次記錄的位置，用于解決切換tab選項卡時導致白屏以及自動將滾動條滾動到頂部的問題 * `返回值`：無 ### validateTable * `說明`：校驗table，失敗返回errMap，成功返回null * `參數`：無 * `返回值`：Promise ### setValues * `說明`： 設置某行某列的值 * `參數`： * `values`：array * `返回值`：void ### getValues * `說明`：獲取表格的值 * `參數`： * `callback`：獲取成功后的callback * `rowIds`：指定查詢的行ID，不傳返回所有行 * `返回值`：void ### getTableData * `說明`： 獲取表格數據 * `參數`： * `options`：object 選項參數 * `rowIds`：string\[\] 行ID，傳了就只返回傳遞的行 * `返回值`：row\[\] ### getSelectionData * `說明`： 獲取選中數據 * `參數`： * `isFull`：如果為 true 則獲取全表已選中的數據 * `返回值`：row\[\] ### getNewData * `說明`：僅獲取新增的臨時數據 * `參數`：無 * `返回值`：row\[\] ### getNewDataWithId * `說明`：僅獲取新增的臨時數據，帶有臨時ID * `參數`：無 * `返回值`：row\[\] ### getIfRowById * `說明`：根據ID獲取行，新增的臨時行也能查出來 * `參數`：id * `返回值`：{row, isNew} * `row`：獲取到的行 * `isNew`：當前行是否是新增的臨時行 ### getNewRowById * `說明`：通過臨時ID獲取新增的臨時行 * `參數`：id * `返回值`：row ### getDeleteData * `說明`：僅獲取被刪除的數據（新增又被刪除的數據不會被獲取到） * `參數`：無 * `返回值`：row\[\] ### clearSelection * `說明`：清空選擇 * `參數`：無 * `返回值`：void ### removeRows * `說明`：刪除一行或多行數據 * `參數`： * `rows`：\[object | array\] 要刪除的行 * `返回值`：Promise ### removeRowsById * `說明`：根據id刪除一行或多行 * `參數`： * `rowId`：\[string | array\] 要刪除的行ID * `返回值`：Promise ### removeSelection * `說明`：刪除選中的數據 * `參數`：無 * `返回值`：Promise ### isDisabledRow * `說明`：判斷是否是禁用行 * `參數`： * `rowId`：行數據 * `force`：boolean 是否強制刷新，默認=true * `返回值`：boolean ### recalcDisableRows * `說明`：重新計算禁用行，當修改了 props.disabledRows 參數時需要用到 * `參數`：無 * `返回值`：void ### socketSendUpdateRow * `說明`：發送socket消息更新行，在WebSocket無痕刷新中會用到 * `參數`： * `row`：要更新的行 * `返回值`：void ## 內置插槽 | 插槽名 | 說明 | | --- | --- | | toolbarPrefix | 在操作按鈕的**前面**插入插槽，和自帶的按鈕共處于一行，受`toolbar`和`toolbarConfig`屬性的影響 | | toolbarSuffix | 在操作按鈕的**后面**插入插槽，和自帶的按鈕共處于一行，受`toolbar`和`toolbarConfig`屬性的影響 | | toolbarAfter | 在工具條的**下面**插入插槽，不受`toolbar`和`toolbarConfig`屬性的影響 | | subForm | 點擊展開子表的內容 | | mainForm | 彈出主表的內容 |