Skip to content

Commit

Permalink
feat: 新增对search params加工扩展的方法
Browse files Browse the repository at this point in the history
  • Loading branch information
lzy-Jerry committed Nov 16, 2023
1 parent c610755 commit 4335c3b
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 2 deletions.
10 changes: 9 additions & 1 deletion src/components/ProTable/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ export interface ProTableProps {
requestAuto?: boolean; // 是否自动执行请求 api ==> 非必传(默认为true)
requestError?: (params: any) => void; // 表格 api 请求错误监听 ==> 非必传
dataCallback?: (data: any) => any; // 返回数据的回调函数,可以对数据进行处理 ==> 非必传
searchParamsCallBack?: (data: any) => any; // 搜索参数的回调函数,可以对数据进行处理 ==> 非必传
title?: string; // 表格标题 ==> 非必传
pagination?: boolean; // 是否需要分页组件 ==> 非必传(默认为true)
initParam?: any; // 初始化请求参数 ==> 非必传(默认为{})
Expand Down Expand Up @@ -166,7 +167,14 @@ const { selectionChange, selectedList, selectedListIds, isSelected } = useSelect
// 表格操作 Hooks
const { tableData, pageable, searchParam, searchInitParam, getTableList, search, reset, handleSizeChange, handleCurrentChange } =
useTable(props.requestApi, props.initParam, props.pagination, props.dataCallback, props.requestError);
useTable(
props.requestApi,
props.initParam,
props.pagination,
props.dataCallback,
props.requestError,
props.searchParamsCallBack
);
// 清空选中数据列表
const clearSelection = () => tableRef.value!.clearSelection();
Expand Down
5 changes: 4 additions & 1 deletion src/hooks/useTable.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,15 @@ import { reactive, computed, toRefs } from "vue";
* @param {Object} initParam 获取数据初始化参数 (非必传,默认为{})
* @param {Boolean} isPageable 是否有分页 (非必传,默认为true)
* @param {Function} dataCallBack 对后台返回的数据进行处理的方法 (非必传)
* @param {Function} searchParamsCallBack 对搜索参数进行处理的方法 (非必传)
* */
export const useTable = (
api?: (params: any) => Promise<any>,
initParam: object = {},
isPageable: boolean = true,
dataCallBack?: (data: any) => any,
requestError?: (error: any) => void
requestError?: (error: any) => void,
searchParamsCallBack?: (data: any) => any
) => {
const state = reactive<Table.StateProps>({
// 表格数据
Expand Down Expand Up @@ -87,6 +89,7 @@ export const useTable = (
nowSearchParam[key] = state.searchParam[key];
}
}
searchParamsCallBack && (nowSearchParam = searchParamsCallBack(nowSearchParam));
Object.assign(state.totalParam, nowSearchParam, isPageable ? pageParam.value : {});
};

Expand Down
8 changes: 8 additions & 0 deletions src/views/proTable/useProTable/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
:request-api="getTableList"
:init-param="initParam"
:data-callback="dataCallback"
:search-params-call-back="searchParamsCallBack"
@darg-sort="sortTable"
>
<!-- 表格 header 按钮 -->
Expand Down Expand Up @@ -97,6 +98,13 @@ const dataCallback = (data: any) => {
};
};
// searchParamsCallBack 提供了为搜索的参数进行扩展加工处理的方法
const searchParamsCallBack = (params: any) => {
return {
...params
};
};
// 如果你想在请求之前对当前请求参数做一些操作,可以自定义如下函数:params 为当前所有的请求参数(包括分页),最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
const getTableList = (params: any) => {
Expand Down

0 comments on commit 4335c3b

Please sign in to comment.