ele easy table
1.0.0
npm install ele-easy-table -S
import 'ele-easy-table'
<ele-easy-table :form="form" :table="table" :formData.sync="formData" @getList="handleSearch"></ele-easy-table>
راجع كود المصدر التجريبي للحصول على التفاصيل
يعتمد مشروعك على element-ui، ويجب أن يقوم مشروعك بتثبيت element-ui
إصدار Element-ui المستخدم بواسطة الكود المصدري
"element-ui": "^2.4.5"
| ملكية | يوضح | يكتب | القيمة الافتراضية |
|---|---|---|---|
| استمارة | منطقة حالة استعلام الجدول | هدف | {} |
| طاولة | منطقة عرض الطاولة | هدف | {} |
| formData.sync | حقول استعلام النموذج | هدف | {} |
| ترقيم الصفحات | ما إذا كان سيتم عرض منطقة الترحيل | [منطقية، كائن] | حقيقي |
| سمات أخرى | خصائص الجدول الأصلية | الرجوع إلى خصائص الجدول الأصلي | - |
| ملكية | يوضح | يكتب | القيمة الافتراضية | ملاحظة |
|---|---|---|---|---|
| فصل | إعداد نمط منطقة حالة استعلام الجدول | هدف | - | - |
| أسلوب | إعداد النمط المضمّن لمنطقة حالة استعلام الجدول | هدف | - | - |
| FoldNum | ينهار الجدول عندما يكون هناك أكثر من العديد من شروط الاستعلام | رقم | - | بدون هذه المعلمة، سيتم عرض كل شيء |
| قائمة | قائمة شروط استعلام الجدول | صفيف | - | راجع كود المصدر التجريبي للحصول على التفاصيل |
| ملكية | يوضح | يكتب | القيمة الافتراضية | ملاحظة |
|---|---|---|---|---|
| قائمة | قائمة بيانات الجدول | صفيف | - | - |
| أعمدة | قائمة رأس الجدول | صفيف | - | راجع كود المصدر التجريبي للحصول على التفاصيل |
| isLoading | ما إذا كان سيتم عرض الرسوم المتحركة لتحميل الجدول | منطقية | - | |
| showIndex | ما إذا كان سيتم عرض عمود الرقم التسلسلي | منطقية | حقيقي | |
| IndexFixed | ما إذا كان سيتم إصلاح عمود الرقم التسلسلي | منطقية | خطأ شنيع | |
| IndexLabel | قم بتخصيص نص رأس قائمة الأرقام التسلسلية | خيط | رقم سري | |
| اختيار | تشكيل تكوين الاختيار المتعدد | هدف | {} |
| ملكية | يوضح | يكتب | القيمة الافتراضية | ملاحظة |
|---|---|---|---|---|
| التكوين | تشكيل خصائص اختيار متعددة | هدف | - | - |
السمة الأصلية للصفحات
يتم تنفيذه عند تبديل رقم الصفحة أو تغيير الرقم المعروض في كل صفحة، ويتم الحصول على البيانات ثم تعيينها إلى table.list لتحديث القائمة.
الأحداث الأصلية لـ el-table، على سبيل المثال: @selection-change="handleSelectionChange" راجع كود مصدر العرض التوضيحي للحصول على التفاصيل
| حدث | يوضح | المعلمة |
|---|---|---|
| Handleتوسيع | حدث رد الاتصال بعد الطي المشروط | isExpand |
يحتوي الجدول على تجاوز نمط مضمن جديد: مرئي؛ لتنفيذ التخطيط الثابت لرأس الجدول، ما عليك سوى إضافة النمط التالي
ملاحظة: إذا كان النمط محدد النطاق، فستحتاج إلى استخدام عامل التشغيل >>> (راجع نطاق الوثيقة CSS للحصول على التفاصيل)
/* 全局样式 */
. el-table__header-wrapper {
position : sticky;
top : 0 ;
z-index : 999 ;
}
/* scoped 局部样式 */
. ele-easy-table-demo > > > . el-table__header-wrapper {
position : sticky;
top : 0 ;
z-index : 999 ;
}راجع كود المصدر التجريبي للحصول على التفاصيل
ملحوظة: لا يمكن استخدامه مع تثبيت العمود في نفس الوقت، لاستخدامه في نفس الوقت، يمكنك استخدام سمة الجدول الأصلي للعنصر لتعيين ارتفاع الجدول.
