Vben-admin带搜索框的表格

1.index.vue 页面：

<template>
   <BasicTable @register="register">
   </BasicTable>
</template>

2.注册表格部分：

const [register, { reload }] = useTable({
      api: getList,   // api接口，返回的数据时数组能正确渲染成功
      columns,        // 数据源，表格头和数据
      rowSelection: { type: 'radio' },  // 单选
      bordered: true,       // 边框
      useSearchForm: true,     // 启用搜索框
      showTableSetting: true,
      formConfig: {
        labelWidth: 120,  // 搜索区域宽度
        schemas: searchFormSchema, // 搜索的表单项数据源
      },
    });

3.data里的cloums 和 searchFormSchema部分

export const searchFormSchema: FormSchema[] = [
    {
      field: 'name',
      label: t('routes.module.enterprise.relation.name'),
      component: 'Input',
      colProps: { span: 12 },
    }
  ];
export const columns: BasicColumn[] = [
  {
    title: t('routes.module.enterprise.relation.name'),
    dataIndex: 'owner.name',
    width: 120,
  },
  {
    title: t('routes.module.enterprise.relation.logo'),
    dataIndex: 'owner.logo',
    // slots: { customRender: 'logo' }, 插槽在index里自定义了图片组件，这里没有展示。
    width: 200,
  }
 ]

4.index.vue里的搜索，重置搜索按钮的功能的实现：
在api里的getList 接口里有两个功能，一是查询表格数据，二是搜索的时候也调用这个接口，
getList里可以携带参数，根据参数查询
示例代码如下（看不懂也没事，只需要知道跟查询列表同一个接口）

import { convertFilter } from '../../helper/base';
import convert from '/@/api/helper/filters/enterprise/ownerTrustee';

enum Api {
  Enterprise = '/enterp/wsgweg',                       // 企业 / 查询
}

export const getList = (params?: EnterpriseListParams & BasicPageParams) =>
  defHttp.get<EnterpriseListGetResultModel>({
    url: Api.Enterprise,
    params: convertFilter(params, convert),
  });

convert是一个过滤文件示例代码如下

* @Description:
 *    - 构造对应视图 where filters
 *    - 文件名称必须跟 /api/module/ 下对应视图 methods 方法保持一致
 *    - 导出的 whereFilter 必须受到类型 FilterWhereType 约束
 */

import {
  ConvertFilterType,
  FilterWhereJudgeType, FilterWhereMultiplyType, FilterSortType
} from '/@/api/model/baseModel';
// import { GetEquipmodelListParams } from '/@/api/module/config/model/equipmodelModel';

/**
 * @description: get tree menudata
 * @param:
 *  - params : {name='xxxxx' ，status='xxxx'}
 */
const convert = (params) : ConvertFilterType=> {
  const filter: ConvertFilterType = {};

  const filters:FilterWhereMultiplyType[] = [];

  const judges1:FilterWhereJudgeType[] = [];
	if(params.status){
		judges1.push({ prop: 'status', op: 'EQ', values: params.status });
	    filters.push({"path":"trustee", "judges": judges1 });
	 }

  const judges2:FilterWhereJudgeType[] = [];
	if(params.name){
	  judges2.push({ prop: 'name', op: 'LK', values: '%'+params.name+'%' });
	  filters.push({"path":"trustee", "judges": judges2 });
	}

  filter.where = { is_and:true,filters };

  const sorts: FilterSortType = {
    props: 'createTime',
    asc: false,
  }
  filter.sorts = sorts;

  console.info('params: ', params);
  console.info('filter: ', filter);

  return filter;
};

export default convert;

convertFilter 的示例代码如下

export const convertFilter = <T extends BasicPageParams & object>(
  params?: T,
  convertFunc?: (params: object) => ConvertFilterType
) : BasicListPageParams=> {
  const pageParams = { ...params };

  // create pageFilter
  const pageFilter: FilterPageType = {
    index: (pageParams.number || defaultPageFilter.index) - 1,
    size: pageParams.size || defaultPageFilter.size,
  };
  delete pageParams.number;
  delete pageParams.size;

  // Delete Unvalid Params
  for (let key in pageParams) {
    const val = `${pageParams[key]}`.trim();
    if (!val || val === "undefined") {
      delete pageParams[key];
    } else {
      pageParams[key] = val;
    }
  }

  // create where && sourts Filters
  const filters: BasicListFilter = {
    page: pageFilter,
  };
  if (pageParams && typeof convertFunc === 'function') {
    const { sorts, where } = convertFunc(pageParams);
    filters.sorts = sorts;
    filters.where = where;
  }

  return {
    filters: JSON.stringify(filters),
  };
};

5.在注册表格的地方注册reload，使用reload()刷新列表。如果要携带额外参数，官网有说明