avue-crud

このスキルを使用する場面

ユーザーが次のことを希望する場合は、いつでもこのスキルを使用してください。

• Avue で CRUD（作成、読み取り、更新、削除）テーブルを構築する
• Avue CRUD テーブルを設定する
• データ管理インターフェースを実装する
• テーブルにページネーション、検索、並べ替えを追加する
• テーブルの列や操作をカスタマイズする
• テーブルイベント（保存、更新、削除）を処理する
• テーブルデータをエクスポートする
• テーブルの選択や一括操作を実装する
• 追加・編集用のテーブルフォームを設定する
• 高度な CRUD 機能を使用する

このスキルの使用方法

このスキルは、Avue CRUD の公式ドキュメントの構成（https://avuejs.com/crud/crud-doc.html）に合わせて整理されています。Avue CRUD を使用する際は、次の手順に従ってください。

1. ユーザーのリクエストからトピックを特定します。

   • はじめに／快速开始 → examples/getting-started/basic-usage.md または examples/getting-started/configuration.md
   • 列の設定／列配置 → examples/features/columns.md
   • CRUD 操作／CRUD 操作 → examples/features/crud-operations.md
   • ページネーション／分页 → examples/features/pagination.md
   • 検索／搜索 → examples/features/search.md
   • エクスポート／导出 → examples/features/export.md
   • 高度な機能／高级功能 → examples/advanced/ ディレクトリ

2. examples/ ディレクトリから適切なサンプルファイルを読み込みます。

   はじめに（快速开始） - examples/getting-started/：

   • examples/getting-started/basic-usage.md - 基本的な CRUD の使用方法
   • examples/getting-started/configuration.md - CRUD の設定オプション

   機能（功能特性） - examples/features/：

   • examples/features/columns.md - 列の設定
   • examples/features/crud-operations.md - CRUD 操作（追加、編集、削除）
   • examples/features/pagination.md - ページネーションの設定
   • examples/features/search.md - 検索機能
   • examples/features/sorting.md - 並べ替えの設定
   • examples/features/selection.md - 行の選択
   • examples/features/export.md - データのエクスポート
   • examples/features/form-config.md - CRUD のフォーム設定

   高度な機能（高级） - examples/advanced/：

   • examples/advanced/custom-operations.md - カスタム操作
   • examples/advanced/column-types.md - さまざまな列タイプ
   • examples/advanced/validation.md - CRUD のフォーム検証
   • examples/advanced/events.md - イベント処理

3. 構文、構成、ベストプラクティスについては、サンプルファイルの個別の指示に従ってください。

   重要事項：

   • すべてのサンプルは Avue CRUD API に準拠しています
   • サンプルでは Vue 2.x の構文を使用しています
   • 各サンプルファイルには、主要な概念、コード例、重要なポイントが記載されています
   • ベストプラクティスと一般的なパターンについては、必ずサンプルファイルを確認してください
   • Avue CRUD はデータ駆動型で、設定ベースです

4. 必要に応じて、api/ ディレクトリの API ドキュメントを参照してください。

   • api/crud-api.md - CRUD コンポーネントの API リファレンス
   • api/column-api.md - 列設定の API
   • api/option-api.md - オプション設定の API

5. templates/ ディレクトリのテンプレートを使用してください。

   • templates/basic-crud.md - 基本的な CRUD テンプレート
   • templates/advanced-crud.md - 高度な CRUD テンプレート
   • templates/crud-with-api.md - API 連携を含む CRUD

ドキュメントの対応関係（公式ドキュメントとの一対一対応）

• examples/ → https://avuejs.com/crud/crud-doc.html

サンプルとテンプレート

このスキルには、公式ドキュメントの構成に合わせて整理された詳細なサンプルが含まれています。すべてのサンプルは examples/ ディレクトリにあります（上記の対応関係を参照）。

サンプルを使用するには：

• ユーザーのリクエストからトピックを特定します
• 上記の対応関係に基づいて、適切なサンプルファイルを読み込みます
• そのファイルに記載された指示、構文、ベストプラクティスに従います
• コード例を具体的なユースケースに合わせて調整します

テンプレートを使用するには：

• 一般的なひな型については、templates/ ディレクトリのテンプレートを参照します
• テンプレートを具体的なニーズやコーディングスタイルに合わせて調整します

API リファレンス

詳細な API ドキュメントは api/ ディレクトリにあり、Avue CRUD の公式 API ドキュメントの構成に合わせて整理されています。

CRUD API (api/crud-api.md)

• コンポーネントの props と API
• コンポーネントのイベントとメソッド
• コンポーネントの設定

Column API (api/column-api.md)

• 列の設定オプション
• 列の種類とプロパティ
• 列のレンダラーとフォーマッター

Option API (api/option-api.md)

• オプション設定オブジェクト
• テーブルのオプション
• フォームのオプション
• ボタンのオプション

API リファレンスの使用方法：

1. 確認したい API を特定します
2. api/ ディレクトリから対応する API ファイルを読み込みます
3. API のシグネチャ、パラメーター、戻り値の型、例を確認します
4. 詳しい使用パターンについては、リンク先のサンプルファイルを参照します
5. すべての API ファイルには、examples/ ディレクトリ内の関連サンプルファイルへのリンクが含まれています

ベストプラクティス

1. 設定駆動：すべての設定にオプションオブジェクトを使用します
2. 列の定義：option.column 配列で列を定義します
3. イベント処理：@row-save、@row-update、@row-del イベントを処理します
4. データ管理：データ配列とページネーションオブジェクトを管理します
5. バリデーション：列の設定でルールを使用してバリデーションを行います
6. パフォーマンス：ページネーションを使用して、大規模なデータセットに対応できるよう最適化します
7. ユーザーエクスペリエンス：ローディング状態とエラー処理を用意します
8. API 連携：バックエンド API と適切に連携します
9. フォーム設定：列定義でフォームを設定します
10. カスタマイズ：必要に応じてスロットとカスタムレンダラーを使用します

リソース

• 公式サイト：https://avuejs.com/
• CRUD ドキュメント：https://avuejs.com/crud/crud-doc.html
• GitHub リポジトリ：https://github.com/avue/avue

キーワード

Avue CRUD、avue-crud、テーブル、CRUD、作成・読み取り・更新・削除、ページネーション、検索、並べ替え、エクスポート、列、フォーム、バリデーション、表格、CRUD、増删改查、分页、搜索、排序、导出、列配置、表单、验证