8lab_customtable 中文文档教程

Question

CustomTable

基于 ant design Table 封装的基础 CRUD 组件，内置搜索栏(可配置)，操作栏(可配置)，自定义表格咧操作栏

参数

 *
 *  columns: Record<string, unknown>[] 列表列
 *
 *  noSearch?: boolean 是否有搜索
 *
 *  columnsSetter?: () => void 可拖拽表格
 *
 *  rowSelection?: Record<string, unknown> | boolean 表格行是否可选择
 *
 *  filterColumns?: Record<string, unknown>[] 筛选列
 *
 *  formModalColumns?:Record<string, unknown>[] 新增修改的数据列
 *
 *  pagination?: boolean 是否分页
 *
 *  tableLayout?: string 表格元素的 table-layout 属性
 *
 *  url: string 接口
 *
 *  addUrl?:string 新增接口
 *
 *  updataUrl?:string 修改接口
 *
 *  deleteUrl?:string 删除接口
 *
 *  options?: React.ReactElement 自定义操作栏
 *
 *  noAddBtn?: boolean 新增按钮
 *
 *  method?: string 请求方法
 *
 *  params?: Record<string, unknown> 接口请求数据
 *
 *  searchValue?: Record<string, any> 搜索值
 *
 *  scroll?: Record<string, unknown> 表格是否支持滚动
 *
 *  bordered?: boolean 表格是否有线
 *
 *  onRowClick?: any 设置行属性
 *
 *  changeRowColor?: boolean 改变行颜色
 *
 *  size?: string 表格大小
 *
 *  autoClick?:  number 是否自动选中第一行
 *
 *  actions?: React.ReactElement 自定义操作栏
 *
 *  reloadTable?: any 导出reload方法

使用方法

<CustomTable
  columns={columns}
  pagination
  rowSelection
  reloadTable={realod}
  formModalColumns={formModalColumns}
  filterColumns={searchColumns}
  url={'rules'}
  params={{ age: 18 }}
  options={
    <>
      <div>sss</div>
    </>
  }
  actions={
    <>
      <span
        onClick={() => {
          setReload((v) => v + 1);
        }}
      >
        重置
      </span>
    </>
  }
  method="get"
/>