アントクラッド
React + Ant.Design に基づく CRUD コンポーネント。
特徴
- 1. 非常に軽量で、Ant.Design のみに依存し、他の依存関係はありません。
- 2.基本的な[追加、削除、変更、確認]および[一括削除]機能をサポートします
- 3. 検索、カスタム ページング、カスタム ソートなどの機能をサポート
- 4. 更新、Excel へのエクスポート、データ印刷、行高さ設定などの機能をサポートします。
- 5. その他の DIY 構成
完成した機能
- 基本的な追加、削除、変更、検索
- ページの読み込み
- 検索パネル
- 一括削除
- データ更新
- EXCELエクスポート
- 行の高さの設定
- 印刷機能
改善すべき機能
- カラム設定機能
- 非定型フォームで表示される閲覧ページの電子化
- モーダルまたはドロワーを選択してページを編集または表示できます。
- ページの編集とページのグループ化設定の表示
- ページのカスタム レイアウトを編集する
- 同じページでレイアウトの選択内容を編集およびリスト表示する
使い始める
npm i @codeflex/antd-crud
関数 アプリ() { '緑' ; if ( tag === '敗者' ) { color = '火山' ; } return ( <タグの色= {カラー}キー= {タグ} > {タグ. toUpperCase () } </ Tag > ); }) } </> ), } ]; const データ: アカウント[] = [ {キー: ' 1 ' 、名前: 'ジョンブラウン' 、年齢: 32 、住所: 'ニューヨーク No.1 レイクパーク' 、タグ: [ ' ' ' 、'開発者' ]、}, {キー: ' 2 ' 、名前: 'ジム グリーン' 、年齢: 42 歳、住所: 'ロンドン No. 1 レイクパーク' 、タグ: [ '敗者' ]、}、{キー: ' 3 ' 、名前: 「ジョー ブラック」、年齢: 32 、住所: 「シドニー No. 1 レイク パーク」、タグ: [ 'クール' 、'教師' ]、}、]; const アクション:アクション<アカウント> = { onCreate :(アカウント) => {コンソール. log ( " onCreate " ,アカウント); } }; return ( < div style = { { width : " 960px " } } > < AntdCrud columns = { columns } dataSource = { data } events = { events } pageNumber = { 1 } pageSize = { 10 } totalRow = { 2342 } /> </ div > ) }
ColumnConfig タイプの説明:
ColumnConfigAntd から継承されたテーブルの列のすべての構成については、https: //ant-design.antgroup.com/components/table-cn#columnを参照してください。
これに基づいて、独自の構成を追加しました。
- placeholder : 検索ボックスと編集ページのプレースホルダー コンテンツ
- supportSearch : 検索要素をサポートするかどうか
- form : フォームのフォーム設定を編集します。タイプは次のとおりです。
FormConfig
FormConfig タイプの説明:
type FormConfig = { // フォーム タイプ、デフォルトは Input, // サポート:Input、InputNumber、Hidden、Radio、Checkbox、Rate、// Switch、DatePicker、Select、Slider、Upload type : string , // カスタム プロパティ、サポートantd 制御属性のすべての属性構成?: any 、 //検証ルール、編集ページ ルールでのみ有効?: any [], }
Actions タイプの説明:
ActionsAntdCrud コンポーネントのリスニング メソッドを定義するために使用されます
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