antd-crud
一個基于 React + Ant.Design 的增刪改查組件。
特征
- 1、極輕量，只依賴于 Ant.Design 再無其他任何依賴
- 2、支持基本的【增刪改查】和【批量刪除】功能
- 3、支持搜索、自定義分頁和自定義排序等功能
- 4、支持刷新、導出 Excel、數據打印、行高設置等功能
- 5、更多的 DIY 配置
已完成功能
- 基本增刪改查
- 分頁加載
- 搜索面板
- 批量刪除
- 數據刷新
- EXCEL 導出
- 行高設置
- 打印功能
待完善功能
- 列設置功能
- 非表單形式展示的查看頁面數據化
- 編輯或查看頁面可選 Modal 或者 Drawer
- 編輯頁面和查看頁面分組設置
- 編輯頁面自定義布局
- 編輯和列表在同一個頁面的布局選擇
開始使用
npm i @codeflex/antd-crud
function App() { const columns: ColumnsConfig<Account> = [ { title: '姓名', dataIndex: 'name', key: 'name', placeholder:"請輸入姓名", supportSearch:true, render: (text) => <a>{text}</a>, }, { title: '年齡', dataIndex: 'age', key: 'age', supportSearch:true, }, { title: '地址', dataIndex: 'address', key: 'address', supportSearch:true, }, { title: '標簽', key: 'tags', dataIndex: 'tags', supportSearch:true, render: (_, { tags }) => ( <> {tags.map((tag) => { let color = tag.length > 5 ? 'geekblue' : 'green'; if (tag === 'loser') { color = 'volcano'; } return ( <Tag color={color} key={tag}> {tag.toUpperCase()} </Tag> ); })} </> ), } ]; const data: Account[] = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', tags: ['nice', 'developer'], }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', tags: ['loser'], }, { key: '3', name: 'Joe Black', age: 32, address: 'Sydney No. 1 Lake Park', tags: ['cool', 'teacher'], }, ]; const actions:Actions<Account> = { onCreate:(account)=>{ console.log("onCreate", account); } }; return ( <div style={{width:"960px"}}> <AntdCrud columns={columns} dataSource={data} actions={actions} pageNumber={1} pageSize={10} totalRow={2342}/> </div> ) }
ColumnConfig 類型說明：
ColumnConfig繼承了 Antd 的 Table 的 Column 的所有配置，參考：https://ant-design.antgroup.com/components/table-cn#column
在此基礎上，增加了自己的配置：
- placeholder: 搜索框和編輯頁面的占位內容
- supportSearch: 是否支持搜素
- form: 編輯表單的 form 設置，類型為
FormConfig
FormConfig 類型說明：
type FormConfig = { // 表單類型，默認為 Input， // 支持：Input、InputNumber、Hidden、Radio、Checkbox、Rate、 // Switch、DatePicker、Select、Slider、Upload type: string, //自定義屬性，支持 antd 控件的所有屬性配置 attrs?: any, //驗證規則，只在編輯頁面起作用 rules?: any[], }
Actions 類型說明：
Actions是用于定義 AntdCrud 組件的監聽方法
Actions 定義的類型如下：
type Actions<T> = { //獲取數據列表 onFetchList?: (currentPage: number , pageSize: number , totalPage: number , searchParams: any , sortKey: string , sortType: "asc" | "desc") => void, //獲取數據詳情 onFetchDetail?: (row: T) => T, //刪除單條數據 onDelete?: (row: T) => void, //批量刪除數據 onDeleteBatch?: (rows: T[]) => void, //數據更新 onUpdate?: (row: T) => void, //數據創建 onCreate?: (row: T) => void, //初始化搜索框的值 onFormItemValueInit?:(key:string) => any }
需要用戶在 Actions 定義以上方法，用于對數據進行操作或查詢。
運行演示
git clone https://gitee.com/antdadmin/antd-crud.git cd antd-crud/example npm install npm run dev
