el data table
v1.23.2
axiosによる自動要求は、ページネーション、ツリーデータ構造、カスタム検索、カスタム操作列をサポートします。これにより、REST APIが簡単になりますか？
このテーブルは、 @femessage/el-formレンダラーを使用してフォームをレンダリングします。
中文文档
El-Data-Tableはビジネス上の問題を解決するために作成されるため、CRUDロジックが内部に設定されています。
たとえば、 user APIを開発するには、次のような相対的なパスを次のように仮定します。
/ api / v1 / usersRestful Crud APIは次のとおりです。
GET / api / v1 / users ? page = 1 & size = 10デフォルトのデータ構造
{
"code" : 0 ,
"msg" : "ok" ,
"payload" : {
"content" : [ ] , // dataPath
"totalElements" : 2 , // totalPath
}
}DataPath/TotalPathをカスタマイズできます。
hasPagination=falseの場合、デフォルトのデータパスはpayloadです
POST / api / v1 / users PUT / api / v1 / users / : id DELETE / api / v1 / users / : id次に、次のコードを使用してCRUD関数を完了する必要があります
< template >
< el-data-table v-bind =" tableConfig " > </ el-data-table >
</ template > < script >
export default {
data ( ) {
return {
tableConfig : {
url : '/example/users' ,
columns : [
{
prop : 'name' ,
label : '用户名'
}
] ,
searchForm : [
{
type : 'input' ,
id : 'name' ,
label : '用户名' ,
el : {
placeholder : '请输入'
}
}
] ,
form : [
{
type : 'input' ,
id : 'name' ,
label : '用户名' ,
el : {
placeholder : '请输入'
} ,
rules : [
{
required : true ,
message : '请输入用户名' ,
trigger : 'blur'
}
]
}
]
}
}
}
}
</ script >結果は次のとおりです。
取得します
作成する
アップデート
消去
⬆バックからトップ
テンプレートのコンテンツをスクリプトに移動すると、テンプレートを削減し、JSを別のファイルに抽出して再利用できることを意味します。同時に、JSのデータは実際にはJSONの一部です。これは、コード生成ツールが役立つことを意味します。
⬆バックからトップ
Element-UIのEl-Tableに基づいてEl-Data-Tableを作成するのはなぜですか？
私はよく次の音を聞きます：
まず第一に、エルテーブルは本当に柔軟性がありますが、ページングリクエストを実装する場合、エルテーブルのみが十分ではなく、エルパジネーションコンポーネントを組み合わせる必要があります。ページング処理の内容のほとんどは繰り返されます。高レベルのビジネスコンポーネントがなければ、どこでも複製コードを取得します。
実際、AdminまたはDashboard Webアプリでは、Restful APIを使用して多くのCRUD操作があります。 CRUD関数を完了するためにコンポーネントを作成するために1つのURLのみを使用することができます。
第二に、多くの経験豊富な開発者は、コンポーネントがより柔軟であると考えています。
ただし、経験がない「ニュービーズ」にとっては、一般的なビジネスシナリオに精通していません。フォーム検証、スペースフィルタリング、読み込みの追加、例外処理など、いくつかの基本操作が忘れる可能性があり、バグが発生します。
最前線のビジネス開発者にとっては、無限の開発タスクに直面して、実際には、繰り返しのビジネスロジックに対処したくありません。彼らはただ手を解放し、早く仕事を辞めたいと思っています。
そのような状況では、エルダタテーブルが生まれました。
⬆バックからトップ
⬆バックからトップ
topに戻ります
Yarnを使用してインストールすることをお勧めします
yarn add @femessage/el-data-table⬆バックからトップ
これは縮小の理由です：このようにして、アプリ、Webpack、またはその他のバンドラーを構築するだけで、このコンポーネントを使用するすべてのページの1つのベンダーに依存関係を1つのページの代わりに1つのベンダーに束ねます
import Vue from 'vue'
// register component and loading directive
import ElDataTable from '@femessage/el-data-table'
import ElFormRenderer from '@femessage/el-form-renderer'
import {
Button ,
Dialog ,
Form ,
FormItem ,
Loading ,
Pagination ,
Table ,
TableColumn ,
Message ,
MessageBox
} from 'element-ui'
Vue . use ( Button )
Vue . use ( Dialog )
Vue . use ( Form )
Vue . use ( FormItem )
Vue . use ( Loading . directive )
Vue . use ( Pagination )
Vue . use ( Table )
Vue . use ( TableColumn )
Vue . component ( 'el-form-renderer' , ElFormRenderer )
Vue . component ( 'el-data-table' , ElDataTable )
// to show confirm before delete
Vue . prototype . $confirm = MessageBox . confirm
// show tips
Vue . prototype . $message = Message
// if the table component cannot access `this.$axios`, it cannot send request
import axios from 'axios'
Vue . prototype . $axios = axios< template >
< el-data-table ></ el-data-table >
</ template >⬆バックからトップ
⬆バックからトップ
次のような、このプロジェクトに貢献することに興味がある人のために
寄付ガイドを参照してください。
topに戻ります
これらの素晴らしい人々に感謝します（絵文字キー）：
徴収 ？ ？ ？ | ドナルド・シェン | Miffycooper | Huanfeng Chen | evillt ？ | アルビン ？ | ハン ？ |
クンジア ？ | エドガー ？ | barretem | 阿禹。 | ルジュンウェイ | CJF ？ | ジャック・ラインボウ ？ |
colmugx | スノーロック | スポンジ ？ | 4ark | htongbing | pppenny | popupdialog ？ |
ジョギター | Yolofit ？ | Huazaili ？ |
このプロジェクトは、全委員会の仕様に従います。あらゆる種類の貢献を歓迎します！
mit
⬆バックからトップ
