avue-crud

このスキルを使うタイミング

次のようなことをユーザーが求めている場合は、いつでもこのスキルを使用してください。

• Avue で CRUD テーブル（作成、読み取り、更新、削除）を構築する
• テーブルの列、ページネーション、検索、並べ替えを設定する
• 行イベント（@row-save、@row-update、@row-del）を処理する
• テーブルデータをエクスポートする、または一括操作を実装する
• CRUD テーブルのダイアログ内にフォームのバリデーションを追加する

このスキルの使い方

ワークフロー

1. オプションオブジェクトを定義する - 列、テーブルの動作、フォームのルールを設定します
2. データとページをバインドする - データ配列とページネーションをコンポーネントに接続します
3. イベントを処理する - 保存、更新、削除のイベントハンドラーを実装します
4. 詳細な例を読み込む - 各機能のファイルは examples/ にあります

クイックスタートの例：ページネーション付き CRUD テーブル

<template>
  <avue-crud
    :option="option"
    :data="data"
    :page.sync="page"
    @row-save="handleSave"
    @row-update="handleUpdate"
    @row-del="handleDel"
    @on-load="loadData"
  />
</template>

<script>
export default {
  data() {
    return {
      data: [],
      page: { currentPage: 1, pageSize: 10, total: 0 },
      option: {
        border: true,
        index: true,
        selection: true,
        column: [
          { label: 'Name', prop: 'name', search: true, rules: [{ required: true, message: 'Name is required' }] },
          { label: 'Email', prop: 'email', search: true },
          { label: 'Status', prop: 'status', type: 'select', dicData: [
            { label: 'Active', value: 1 }, { label: 'Inactive', value: 0 }
          ]}
        ]
      }
    }
  },
  methods: {
    loadData() {
      // Fetch data from API using this.page.currentPage and this.page.pageSize
    },
    handleSave(row, done) { /* POST to API, then call done() */ done() },
    handleUpdate(row, index, done) { /* PUT to API, then call done() */ done() },
    handleDel(row, index) { /* DELETE from API, then remove from this.data */ }
  }
}
</script>

機能リファレンス

機能	ファイル
列の設定	examples/features/columns.md
CRUD 操作	examples/features/crud-operations.md
ページネーション	examples/features/pagination.md
検索	examples/features/search.md
エクスポート	examples/features/export.md
フォームのバリデーション	examples/advanced/validation.md

API リファレンス

• api/crud-api.md - コンポーネントのプロパティ、イベント、メソッド
• api/column-api.md - 列の種類、レンダラー、フォーマッター
• api/option-api.md - テーブル、フォーム、ボタンのオプション

ベストプラクティス

1. 設定主導 - テンプレートのマークアップではなく、すべてのテーブルの動作を option オブジェクトで定義します
2. イベントハンドラーで done() を呼び出す - ダイアログを閉じるため、保存または更新の後に必ず done() を呼び出します
3. 列の種類を使う - type: 'select'、type: 'date' などを設定すると、フォームコントロールが自動的に設定されます
4. サーバー側でページネーションする - 大規模なデータセットには、ページパラメーターとともに @on-load を使用します
5. 検索列を追加する - 列に search: true を設定すると、検索バーが有効になります

リソース

• 公式ドキュメント: https://avuejs.com/crud/crud-doc.html

キーワード

Avue CRUD、avue-crud、テーブル、CRUD、作成・読み取り・更新・削除、ページネーション、検索、列、フォーム、テーブル、ページネーション、データ管理