el data table
v1.23.2
الطلب التلقائي عن طريق axios ، يدعم ترقيم الصفحات، وبنية بيانات الشجرة، والبحث المخصص، وعمود التشغيل المخصص، مما يجعل بقية واجهة برمجة التطبيقات سهلة؟
يستخدم الجدول @femessage/el-form-renderer لعرض النموذج.
中文文档
تم إنشاء جدول البيانات el-data لحل مشاكل العمل، لذلك تم ضبط منطق CRUD بداخله.
على سبيل المثال، لتطوير واجهة برمجة تطبيقات user ، افترض أن مسارها النسبي هو كما يلي:
/ api / v1 / usersيجب أن تكون واجهة برمجة تطبيقات CRUD المريحة:
GET / api / v1 / users ? page = 1 & size = 10بنية البيانات الافتراضية
{
"code" : 0 ,
"msg" : "ok" ,
"payload" : {
"content" : [ ] , // dataPath
"totalElements" : 2 , // totalPath
}
}يمكنك تخصيص dataPath/totalPath.
إذا كان hasPagination=false ، فإن dataPath الافتراضي هو 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، وهذا يعني أن أداة إنشاء التعليمات البرمجية يمكن أن تساعد.
⬆العودة إلى الأعلى
لماذا تقوم بإنشاء جدول بيانات el بناءً على جدول el element-ui؟
كثيرا ما أسمع الأصوات التالية:
بادئ ذي بدء، يجب أن أقول إن el-table مرن حقًا، ولكن عند تنفيذ طلبات الترحيل، فإن el-table فقط لا يكفي، ويجب دمج مكون el-pagination. يتم تكرار معظم محتوى معالجة الترحيل. وبدون وجود مكون عمل رفيع المستوى، نحصل على تعليمات برمجية مكررة في كل مكان.
في الواقع، في تطبيق الويب الخاص بالمسؤول أو لوحة المعلومات، هناك العديد من عمليات CRUD، باستخدام واجهة برمجة التطبيقات المريحة. من الممكن استخدام عنوان url واحد فقط لإنشاء مكون لإكمال وظائف CRUD.
ثانيًا، يعتقد العديد من المطورين ذوي الخبرة أن المكونات كلما كانت أكثر مرونة كلما كان ذلك أفضل.
ومع ذلك، بالنسبة "للمبتدئين" الذين يفتقرون إلى الخبرة، فإنهم ليسوا على دراية بسيناريوهات الأعمال الشائعة. بعض العمليات الأساسية، مثل التحقق من صحة النموذج، وتصفية المساحة، وإضافة التحميل، ومعالجة الاستثناءات، قد يتم نسيانها، مما يؤدي إلى حدوث أخطاء.
بالنسبة لمطوري الأعمال في الخطوط الأمامية، في مواجهة مهام التطوير التي لا نهاية لها، فإنهم في الواقع لا يريدون التعامل مع منطق الأعمال المتكرر. إنهم يريدون فقط تحرير أيديهم والخروج من العمل مبكرًا.
في مثل هذه الحالة، وُلد جدول البيانات el-data.
⬆العودة إلى الأعلى
⬆العودة إلى الأعلى
⬆ العودة إلى الأعلى
شجع على استخدام الغزل للتثبيت
yarn add @femessage/el-data-table⬆العودة إلى الأعلى
هذا لسبب التصغير: بهذه الطريقة، عند إنشاء تطبيقك أو حزمة الويب أو أي أداة تجميع أخرى، ما عليك سوى تجميع التبعيات في بائع واحد لجميع الصفحات التي تستخدم هذا المكون، بدلاً من بائع واحد لصفحة واحدة
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 >⬆العودة إلى الأعلى
⬆العودة إلى الأعلى
للراغبين في المساهمة في هذا المشروع مثل:
يرجى الرجوع إلى دليل المساهمة لدينا.
⬆ العودة إلى الأعلى
الشكر موصول لهؤلاء الأشخاص الرائعين (مفتاح الرموز التعبيرية):
ضريبة ؟ ؟ ؟ | دونالد شين | ميفي كوبر | هوانفينج تشن | ايفيلت ؟ | ألفين ؟ | هان ؟ |
kunzhijia ؟ | إدغار ؟ | باريتيم | 阿禹. | com.lujunwei | cjf ؟ | جاك قوس قزح ؟ |
ColMugX | ثلج | اسفنجة ؟ | 4 تابوت | هتونجبينج | ببيني | PopupDialog ؟ |
جوجيتر | yolofit ؟ | هوازيلي ؟ |
يتبع هذا المشروع مواصفات جميع المساهمين. المساهمات من أي نوع موضع ترحيب!
معهد ماساتشوستس للتكنولوجيا
⬆العودة إلى الأعلى
