vue element crud
1.0.0
残念ながら、このリポジトリはもう保守されていません。ご自身の責任で使用してください。
注: このプロジェクトにはコンポーネントの実装に問題がある可能性があり、時間の経過とともに Vue フレームワークと要素 UI ライブラリのバージョンも更新される可能性があり、現在および将来に適さない可能性があります。
有名な vue UI コンポーネントである element-ui に基づいた、ラップされた vue CRUD コンポーネント。
element-uiコンポーネントに基づいたコンポーネントの追加、削除、変更、チェック。
ここに簡単なデモがあります。
プロジェクト内のサンプルとソース コード ファイル Crud.vue を読んで、コンポーネントの具体的な使用方法を理解することができます。
必要に応じてこのリポジトリをダウンロードまたは複製し、npm スクリプトを実行できます。
$ npm install
$ npm run dev新しいターミナルを開き、
$ npm run build:watchvue-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 ]
} このコンポーネントについて何かアイデアがある場合は、遠慮せずにお知らせください。改善するために新しい問題を作成することができます。
