el table plus

el-table-plus

مكونات قابلة للتكوين على أساس الجدول

الخلفية: عند استخدام عنصر الجدول، يجب كتابة الكثير من التعليمات البرمجية للقالب، مما يؤدي إلى وجود الكثير من تعليمات HTML البرمجية على الصفحة. بالنظر إلى مكتبة مكونات العناصر من طبقة التطبيق، على الرغم من أن تصميم واجهة برمجة التطبيقات مرن للغاية، إلا أنه مرهق للغاية للاستخدام. لذلك، يجب تعبئة el-table لتبسيط التكوينات ذات الصلة.

يعد تصميم واجهة برمجة التطبيقات لطبقة التطبيق جيدًا نسبيًا. نوصي باستخدام جدول antd-design-vue. يشير تصميم واجهة برمجة التطبيقات el-table-plus إلى مكون جدول antd-design-vue. في الوقت نفسه، تدعم جميع السمات/الأحداث مكون جدول العناصر الأصلي، والذي لن يدمر واجهة برمجة التطبيقات الأصلية (بدون تدخل)؛ كما يدعم أيضًا وظيفة الفتحة/jsx/h لتخصيص عرض بيانات العمود بثلاث طرق لتحقيق التخصيص عرض منطق الأعمال؛ كما أنه مدمج أيضًا في مكونات ترقيم الصفحات شائعة الاستخدام وواجهات برمجة التطبيقات الموسعة التي تساعد في التعامل مع الأعمال الشائعة بشكل ملائم.

حالة على الانترنت

https://lq782655835.github.io/el-table-plus

سمات

1. الاستخدام البسيط، هناك حاجة إلى بيانات وعمودين فقط لدعمهما
2. الميراث الكامل، السمة الكاملة لعنصر واجهة المستخدم/ميراث الحدث
3. قابل للتطوير بشكل كبير، ويدعم وظيفة الفتحة/jsx/h لتخصيص بيانات عمود العرض بثلاث طرق
4. أكثر ملاءمة، قم بتوسيع حدث التمرير، ومكون ترقيم الصفحات، والتنسيق السريع fn

التثبيت والمقدمة

ثَبَّتَ

yarn add @springleo/el-table-plus

يقدم

يعتمد هذا المكون على مكون el-table في element-ui ويجب تقديمه بنفسك.

 import ElementUI from "element-ui" ;
import "element-ui/lib/theme-chalk/index.css" ;
Vue . use ( ElementUI ) ;

import ElTablePlus from '@springleo/el-table-plus'
Vue . use ( ElTablePlus ) 

الاستخدام الأساسي

 < template >
    < el-table-plus
      :data =" list "
      :columns =" [
        { label: 'ID', value: 'id', width: '80px' },
        { label: '存储卷名', value: 'name' },
        { label: '总容量', value: 'storage', fn: val => `${val}G` },
        { label: '创建人', value: 'member.userId' },
        { label: '邮箱', value: 'member.email' },
        { label: '创建时间', value: 'gmtCreate' }
      ] "
    />
</ template > 

واجهة برمجة التطبيقات

سمة الجدول زائد

يدعم جميع السمات الأصلية على el-table ويوسع واجهات برمجة التطبيقات التالية.

المعلمة	يكتب	القيمة الافتراضية	يوضح
تحميل	منطقية	خطأ شنيع	جارٍ تحميل الرسوم المتحركة
بيانات	صفيف	[]	بيانات القائمة
أعمدة	صفيف	[]	قائمة تكوين عناصر العمود، راجع الأعمدة Attrs أدناه للحصول على التفاصيل
ترقيم الصفحات	هدف		تكوين أداة تقليب الصفحات، لم يتم تعيينها بشكل افتراضي، ولن يتم عرض أداة تقليب الصفحات. يمكن العثور على واجهات برمجة التطبيقات ذات الصلة في el-pagination
المجموع	رقم	0	إجمالي عدد مقلبي الصفحات

حدث الجدول بلس

يدعم جميع الأحداث الأصلية على الجدول ويمتد واجهات برمجة التطبيقات التالية.

اسم الحدث	يوضح	وصف
انتقل	حدث شريط التمرير في الجدول	ه
تغيير الصفحة	حدث تغيير تقليب الصفحة	{ حجم الصفحة، الصفحة الحالية }

سمة الأعمدة

يدعم جميع السمات الأصلية والفتحة ذات النطاق الخاص بعمود الجدول، ويوسع واجهات برمجة التطبيقات التالية:

أتر	يكتب	تقصير	وصف
ملصق	خيط		اسم العمود
دعم	خيط		تدعم حقول بيانات العمود تداخل الكائنات متعدد المستويات، مثل user.email.prefix
مختفي	منطقية		ما إذا كان سيتم إخفاء هذا العمود. الاقتراح هو اقتراح محسوب يتيح العرض والإخفاء سريع الاستجابة.
customRender	وظيفة		عرض بيانات العمود المخصص. معلمات الوظيفة (القيمة، الصف، العمود، $index، h)، تدعم وظائف jsx وh
customTitle	وظيفة		عرض رأس العمود المخصص. معلمات الوظيفة (العمود، الفهرس $، h)، تدعم وظائف jsx وh
ScopedSlots	هدف		استخدم وضع الفتحة لتخصيص العرض واستبدال وظيفة customRender/customTitle. على سبيل المثال: { customRender: 'slotName1'، customTitle: 'slotName2' }

سلسلة البرنامج المساعد Vue

البرنامج المساعد	حالة	وصف
@springleo/el-dialog-helper		وعد بمربعات الحوار في Vue!
@springleo/el-table-plus		مكونات قابلة للتكوين على أساس الجدول
@springleo/el-form-plus		قاعدة نموذج المخطط على نموذج عنصر واجهة المستخدم
@springleo/virtual-scroll-table		مكون جدول التمرير الافتراضي المنسدل اللانهائي

رخصة

معهد ماساتشوستس للتكنولوجيا