vue element crud

لسوء الحظ، لم يعد يتم الحفاظ على هذا المستودع، استخدمه على مسؤوليتك الخاصة.

ملاحظة: قد يواجه هذا المشروع بعض المشاكل في تنفيذ المكونات، ومع مرور الوقت، قد يتم أيضًا تحديث إصدارات إطار عمل Vue ومكتبة Element UI، والتي قد لا تكون مناسبة للحاضر والمستقبل.

vue-element-crud

مكون vue CRUD ملفوف يعتمد على مكونات vue UI الشهيرة - element-ui.

مكون إضافة وحذف وتعديل وفحص بناءً على مكونات element-ui .

هنا عرض توضيحي بسيط.

يمكنك قراءة الأمثلة وملف التعليمات البرمجية المصدر Crud.vue في المشروع لمساعدتك على فهم الاستخدام المحدد للمكون.

التنمية المحلية

يمكنك تنزيل هذا المستودع أو استنساخه طالما أردت ذلك، ثم يمكنك تشغيل البرامج النصية npm

$ npm install
$ npm run dev

فتح محطة جديدة،

$ npm run build:watch

الاستخدام

يمكنك استخدام vue-element-crud كمكون إضافي لـ vue أو كمكون vue.

إذا كنت ترغب في التعامل معه كمكون، فيمكنك استيراد CRUD كمكونات.

كمكون

 import { CRUD } from 'vue-element-crud'

export default {
  components : { 'crud' : CRUD }
}

بخلاف ذلك، يمكنك التعامل معه كمكون إضافي.

كمكون إضافي

الخطوة 1، مشروع init

قد تحتاج إلى بدء مشروع vue أو إنشاء مشروع موجود للمتابعة حيث يلزم استخدام أداة تحميل vue أو أداة تحميل babel أو أداة تحميل css لعنصر واجهة المستخدم.

$ vue init webpack < project-name > 

الخطوة 2، التثبيت

يعتمد هذا المكون على element-ui، وسيتم تثبيت element-ui تلقائيًا عند تثبيت vue-element-crud ، لذلك لا يتعين عليك تثبيت element-ui بالإضافة إلى ذلك.

$ npm install -S vue-element-crud

الخطوة 3، استخدم العرض

أضف هذه السطور أدناه إلى main.js الخاص بك

 import 'element-ui/lib/theme-default/index.css'
import ElementUI from 'element-ui'
import CRUD from 'vue-element-crud'

Vue . use ( ElementUI )
Vue . use ( CRUD ) 

الخطوة 4، راجع الأمثلة

يمكنك قراءة المستندات أو الأمثلة لمعرفة كيفية تنفيذ الدعائم والأساليب الخاصة بهذا vue-element-crud.

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

الدعائم	يكتب	مطلوب	تقصير	وصف
بيانات	صفيف	حقيقي	---	مصفوفة بيانات الجدول
استمارة	هدف	حقيقي	---	كائن النموذج لتخزين متغيرات عناصر النموذج
الحقول	هدف	حقيقي	---	الكائن الذي يصف بنية عناصر النموذج، على سبيل المثال { name: { label: 'name', length: 20, type: String, options: [{ label: 'Mike', value: 'Mike' }] }
قواعد	هدف	خطأ شنيع	---	الكائن الذي يصف قواعد عناصر النموذج { name: [{ required: true, message: 'name is required.' }] }
مقاس	خيط	خطأ شنيع	'large'	قم بتغيير حجم مربع الحوار إلى 'full' أو 'large' أو small أو محذوف.
عرض التسمية	خيط	خطأ شنيع	'100px'	عرض التسمية للنموذج والجدول.
مضمنة	منطقية	خطأ شنيع	false	تحديد ما إذا كانت عناصر النموذج موجودة في السطر أم لا.
طاولة	هدف	خطأ شنيع	---	إذا كانت بنية الجدول لا تتوافق مع بنية النموذج، فيمكنك تحديدها { name: 'name' } سبيل المثال.
الإجراءات	صفيف	خطأ شنيع	['create', 'destroy', 'update']	الأفعال القاسية.
تحميل	منطقية	خطأ شنيع	false	CRUD في حالة XHR وتم تعطيل زر الإرسال إذا كان صحيحًا.
HighlightCurrentRow	منطقية	خطأ شنيع	false	تسليط الضوء على الصف الحالي في الجدول أم لا.
RowStyle	وظيفة	خطأ شنيع	---	وظيفة نمط صف الجدول Function(row, index)

الأحداث	وصف
يفتح	حدث فتح الحوار. اضبط editing على صواب لإظهار مربع الحوار.
يغلق	حدث إغلاق الحوار. اضبط editing على خطأ لإغلاق مربع الحوار.
يخلق	حدث إنشاء النموذج تحتاج إلى تعيين نموذج النموذج إلى form .
تحديث	حدث تحديث النموذج (row, index) الذي تم تمريره إلى المعالج، تحتاج إلى تعيين صف form .
تدمير	تم تمرير حدث تدمير صف الجدول (row, index) إلى المعالج.
يُقدِّم	حدث إرسال النموذج (status, closeDialog) closeDialog تم تمريره إلى المعالج. 0 يشير إلى الإنشاء، والرقم 1 يشير إلى التحديث.
يوسع	تم تمرير حدث توسيع الجدول (row, expanded) إلى المعالج.
انقر فوق الصف	حدث النقر على صف الجدول (row, event, column) الذي تم تمريره إلى المعالج.
صف-dblclick	حدث dblclick لصف الجدول (row, event) الذي تم تمريره إلى المعالج.

فتحات	وصف
فِهرِس	فتحة فهرس صف الجدول. انظر فتحات جدول واجهة المستخدم.
يوسع	فتحة توسيع الجدول راجع فتحات جدول واجهة المستخدم.
إضافة مسبقة	فتحة الجدول المسبق.
تقصير	فتحة إلحاق الجدول.
الملحق	فتحة ملحق النموذج.

قد يبدو القالب الخاص بك هكذا.

 <crud :data="data" :form="form" :rules="rules" :fields="fields" inline index
    :editing="editing" @open="handleOpen" @close="handleClose"
    @create="handleCreate" @update="handleUpdate" @destroy="handleDestroy" @submit="handleSubmit"/>

إليك مزيجًا بسيطًا قد يساعدك على تشغيله، فقط قم باستيراد Simple .

 import { Simple } from 'vue-element-crud'

export {
  mixins : [ Simple ]
} 

يساهم

إذا كانت لديك بعض الأفكار حول هذا المكون، فلا تتردد في إخبارنا أنه يمكنك إنشاء إصدار جديد لتحسينه.