残念ながら、このリポジトリはもう保守されていません。ご自身の責任で使用してください。
注: このプロジェクトにはコンポーネントの実装に問題がある可能性があり、時間の経過とともに Vue フレームワークと要素 UI ライブラリのバージョンも更新される可能性があり、現在および将来に適さない可能性があります。
有名な vue UI コンポーネントである element-ui に基づいた、ラップされた vue CRUD コンポーネント。
element-ui
コンポーネントに基づいたコンポーネントの追加、削除、変更、チェック。
ここに簡単なデモがあります。
プロジェクト内のサンプルとソース コード ファイル Crud.vue を読んで、コンポーネントの具体的な使用方法を理解することができます。
必要に応じてこのリポジトリをダウンロードまたは複製し、npm スクリプトを実行できます。
$ npm install
$ npm run dev
新しいターミナルを開き、
$ npm run build:watch
vue-element-crud は、vue プラグインまたは vue コンポーネントとして使用できます。
コンポーネントとして扱いたい場合は、CRUD をコンポーネントとしてインポートできます。
import { CRUD } from 'vue-element-crud'
export default {
components : { 'crud' : CRUD }
}
それ以外の場合は、プラグインとして扱うことができます。
element-ui には vue-loader、babel-loader、または css-loader が必要であるため、続行するには vue プロジェクトを初期化するか、既存のプロジェクトを取得する必要がある場合があります。
$ vue init webpack < project-name >
このコンポーネントは element-ui に依存しており、 vue-element-crud
インストールするとelement-ui
が自動的にインストールされるため、追加でelement-ui
インストールする必要はありません。
$ npm install -S vue-element-crud
以下の行を main.js に追加します。
import 'element-ui/lib/theme-default/index.css'
import ElementUI from 'element-ui'
import CRUD from 'vue-element-crud'
Vue . use ( ElementUI )
Vue . use ( CRUD )
この vue-element-crud のプロパティとメソッドを実装する方法については、ドキュメントまたはサンプルを読んでください。
小道具 | タイプ | 必須 | デフォルト | 説明 |
---|---|---|---|---|
データ | 配列 | 真実 | --- | テーブルデータ配列 |
形状 | 物体 | 真実 | --- | フォーム項目変数を格納するフォームオブジェクト |
フィールド | 物体 | 真実 | --- | フォーム項目の構造を記述するオブジェクト。例: { name: { label: 'name', length: 20, type: String, options: [{ label: 'Mike', value: 'Mike' }] } |
ルール | 物体 | 間違い | --- | フォーム項目のルールを記述するオブジェクト。例: { name: [{ required: true, message: 'name is required.' }] } |
サイズ | 弦 | 間違い | 'large' | ダイアログのサイズを'full' または'large' またはsmall 」または省略します。 |
ラベル幅 | 弦 | 間違い | '100px' | フォームとテーブルのラベルの幅。 |
列をなして | ブール値 | 間違い | false | フォーム項目がインラインに存在するかどうかを決定します。 |
テーブル | 物体 | 間違い | --- | テーブルの構造がフォームの構造に従っていない場合は、 { name: 'name' } のように指定できます。 |
アクション | 配列 | 間違い | ['create', 'destroy', 'update'] | 残酷な行為。 |
読み込み中 | ブール値 | 間違い | false | CRUD は XHR 状態にあり、true の場合は [送信] ボタンが無効になりました。 |
ハイライト現在の行 | ブール値 | 間違い | false | テーブルの現在の行を強調表示するかどうか。 |
行スタイル | 関数 | 間違い | --- | テーブル行スタイル関数Function(row, index) 。 |
イベント | 説明 |
---|---|
開ける | ダイアログを開くイベントをediting true に設定してダイアログを表示します。 |
近い | ダイアログを閉じるイベントを false にediting してダイアログを閉じます。 |
作成する | form create イベントをform に割り当てる必要があります。 |
アップデート | フォーム更新イベント(row, index) をform に割り当てる必要があります。 |
破壊する | テーブル行の破壊イベント(row, index) がハンドラーに渡されます。 |
提出する | フォーム送信イベント(status, closeDialog) closeDialog ハンドラーに渡されます。0 0 作成を表し、 1 更新を表します。 |
拡大する | ハンドラーに渡さ(row, expanded) テーブル展開イベント。要素 UI テーブル イベントを参照してください。 |
行クリック | ハンドラーに渡されるテーブル行クリック イベント(row, event, column) 。要素 UI テーブル イベントを参照してください。 |
行-dblクリック | table row dblclick イベント(row, event) は、要素 UI テーブル イベントを参照してください。 |
スロット | 説明 |
---|---|
索引 | テーブル行インデックス スロット。要素 UI テーブル スロットを参照してください。 |
拡大する | テーブル拡張スロット。要素 UI テーブル スロットを参照。 |
先頭に追加する | テーブルの先頭にスロットを追加します。 |
デフォルト | テーブル追加スロット。 |
アドオン | フォームアドオンスロット。 |
テンプレートは次のようになります。
<crud :data="data" :form="form" :rules="rules" :fields="fields" inline index
:editing="editing" @open="handleOpen" @close="handleClose"
@create="handleCreate" @update="handleUpdate" @destroy="handleDestroy" @submit="handleSubmit"/>
これは、 Simple
インポートするだけでブートストラップできる簡単なミックスインです。
import { Simple } from 'vue-element-crud'
export {
mixins : [ Simple ]
}
このコンポーネントについて何かアイデアがある場合は、遠慮せずにお知らせください。改善するために新しい問題を作成することができます。