el data tree

エルデータツリー

axios使用してリクエストを自動的に送信し、フィルタリングをサポートし、アクション列をカスタマイズし、RESTful CRUD を簡素化しますか?

中文档

目次

• 導入
  • クラッド
• 特徴
• デモ
• プレインストール
• インストール
• クイックスタート
  • グローバルレジスタコンポーネント
  • テンプレート
• 貢献者
• ライセンス

導入

クラッド

el-data-tree はビジネス上の問題を解決するために作成されるため、内部には CRUD ロジックが設定されます。
たとえば、 user API を開発するには、その相対パスが次のようになっているとします。

/api/v1/users

RESTful CRUD API は次のようになります。

• 取得

 GET / api / v1 / users ? type = 1

• 作成する

 POST / api / v1 / users

• アップデート

 PUT / api / v1 / users / : id

• 消去

 DELETE / api / v1 / users / : id

次に、次のコードを使用するだけで CRUD 関数を完了できます。

 < template >
  < el-data-tree v-bind =" treeConfig " > </ el-data-tree >
</ template > 

 < script >
export default {
  data ( ) {
    return {
      treeConfig : {
        url : '/example/users' ,
        dataPath : 'data.payload' ,
        showFilter : true ,
        form : [
          {
            $type : 'input' ,
            $id : 'name' ,
            label : '用户名' ,
            $el : {
              placeholder : '请输入'
            } ,
            rules : [
              {
                required : true ,
                message : '请输入用户名' ,
                trigger : 'blur'
              }
            ]
          }
        ]
      }
    }
  }
}
</ script >

結果は次のとおりです。

• 取得

• 作成する

• アップデート

• 消去

⬆ トップに戻る

特徴

• 構成を使用して RESTful API を呼び出し、CRUD 関数を完了します
• カスタム メニュー バーとカスタム アクション機能をサポート
• デフォルトでexpandedKeysを保存し、create/delete/update APIを呼び出した後でもexpandedKeysの状態が失われることはありません
• 最適化されたノードチェック方法

⬆ トップに戻る

デモ

• ドキュメントとオンラインデモ

⬆ トップに戻る

プレインストール

このコンポーネントは、element-ui、@femessage/el-form-renderer、axios のpeerDependency に依存します。
プロジェクトにインストールされていることを確認してください

yarn add element-ui @femessage/el-form-renderer axios

⬆ トップに戻る

インストール

インストールには糸を使用することをお勧めします

yarn add @femessage/el-data-tree

⬆ トップに戻る

クイックスタート

グローバルレジスタコンポーネント

これは縮小のためです。この方法でアプリ、Webpack、またはその他のバンドラーを構築すると、1 つのページに 1 つのベンダーではなく、このコンポーネントを使用するすべてのページの依存関係が 1 つのベンダーにバンドルされるだけです。

 import Vue from 'vue'
// register component and loading directive
import ElDataTree from '@femessage/el-data-tree'
import ElFormRenderer from '@femessage/el-form-renderer'
import {
  Button ,
  Dialog ,
  Dropdown ,
  DropdownMenu ,
  DropdownItem ,
  Form ,
  FormItem ,
  Input ,
  Loading ,
  Tree ,
  MessageBox ,
  Message
} from 'element-ui'
Vue . use ( Button )
Vue . use ( Dialog )
Vue . use ( Dropdown )
Vue . use ( DropdownMenu )
Vue . use ( DropdownItem )
Vue . use ( Form )
Vue . use ( FormItem )
Vue . use ( Input )
Vue . use ( Loading . directive )
Vue . use ( Tree )
Vue . component ( 'el-form-renderer' , ElFormRenderer )
Vue . component ( 'el-data-tree' , ElDataTree )
// to show confirm before delete
Vue . prototype . $confirm = MessageBox . confirm
// if the tree component cannot access `this.$axios`, it cannot send request
import axios from 'axios'
Vue . prototype . $axios = axios

⬆ トップに戻る

テンプレート

< template >
  < el-data-tree ></ el-data-tree >
</ template >

⬆ トップに戻る

貢献者

アルビン

徴収 ? ?

コールドストーン

悪者 ?

ドナルド・シェン ?

コルマグX ?

オウズユ ?

このプロジェクトは、全員参加者の仕様に従っています。あらゆる種類の貢献を歓迎します!

⬆ トップに戻る

ライセンス

マサチューセッツ工科大学

⬆ トップに戻る