elsa vue

إلسا

⚡ يعتمد elsa (eleme simple admin) على element-ui ويشتمل على el-form وel-table ومكونات أخرى، وهو مناسب للتطوير السريع لمشاريع إدارة الواجهة الخلفية.

للحصول على أمثلة الاستخدام، راجع: مثال

بداية سريعة

 npm i elsa - vue - S 

 // vue main.js
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Elsa from 'elsa-vue'

Vue . use ( Element )
Vue . use ( Elsa ) 

ميزة

• بطاقة أخرى
  • يدعم إعداد العناوين الرئيسية والفرعية
• جدول آخر
  • أعمدة القائمة القابلة للتكوين
  • دعم التحكم في الترحيل
  • يدعم عرض البيانات على شكل شجرة والتحميل البطيء
• شكل إلسا
  • مكونات النموذج المدعومة
    • المدخلات
    • الراديو
    • خانة الاختيار
    • التحديد
    • تحميل
    • el-xxx-منتقي
  • تخطيط مخصص
  • إعادة تعيين المجموع الاختباري للنموذج
  • تحليل عش الكائنات المتداخلة
  • نموذج الإعداد الشامل المعطل
  • معلومات تلميح لعناصر النموذج
  • عناصر النموذج: ديناميكية/مرتبطة
    • معطل/ممكن
    • إظهار/إخفاء
    • تعديل خيارات الخيارات المتعددة ديناميكيًا

طاولة إلسا

الاستخدام:

1. الحصول على مصدر البيانات dataSource من نوع الصفيف
2. قم بتكوين معلومات العمود المعروضة بناءً على خصائص الكائن في مصدر البيانات.
3. تعيين ترقيم صفحات معلمات الترحيل

 < elsa-table border :columns =" columns " :dataSource =" dataSource " :pagination =" pagination " /> 

 export default {
  data ( ) {
    return {
      dataSource : [
        { name : 'eminoda' , age : 30 } ,
        { name : 'foo' , age : 40 } ,
        { name : 'bar' , age : 50 }
      ] ,
      columns : [
        { label : '序号' , align : 'center' , type : 'index' , width : '50' } ,
        { label : '姓名' , align : 'center' , prop : 'name' , width : '100' } ,
        { label : '年龄' , align : 'center' , prop : 'age' , width : '100' }
      ] ,
      pagination : {
        pageSize : 10 ,
        currentPage : 1 ,
        total : 0 ,
        currentChange : currentPage => { } ,
        sizeChange : pageSize => { }
      }
    }
  }
}

سمات ElsaTable

المعلمة	يوضح	يكتب	قيمة اختيارية	القيمة الافتراضية
أعمدة	معلومات العمود	صفيف
مصدر البيانات	مصدر البيانات	صفيف
ترقيم الصفحات	معلومات ترقيم الصفحات	هدف
...elProps	سمة الجدول

ElsaTable.columns

المعلمة	يوضح	يكتب	قيمة اختيارية	القيمة الافتراضية
يكتب	يضيف التحديد عمود مربع التحديد يضيف الفهرس عمود الرقم التسلسلي توسيع عرض المزيد	خيط	اختيار/فهرس/توسيع
ملصق	عنوان	خيط
دعم	تحليل الحقول	خيط
عرض	عرض العمود المقابل	خيط
مُثَبَّت	سواء كان العمود ثابتًا إلى اليسار أو اليمين، يعني صحيح ثابتًا إلى اليسار	سلسلة/منطقية	صحيح، اليسار، اليمين
المنسق	تنسيق البيانات	الدالة (الصف، العمود، قيمة الخلية)
إظهار تجاوز السعة تلميح الأداة	إظهار تلميح الأداة عندما يكون المحتوى طويلًا جدًا ومخفيًا	منطقية

لمزيد من التفاصيل، راجع: عمود الجدول

ElsaTable.elProps

المعلمة	يوضح	يكتب	قيمة اختيارية	القيمة الافتراضية
بيانات	استبدل بـ dataSource
حدود	ما إذا كان يجب أن يكون لديك حدود عمودية	منطقية		خطأ شنيع
مقاس	مقاس	خيط	متوسطة / صغيرة / صغيرة
ملائم	ما إذا كان عرض العمود ذاتي الدعم	منطقية		حقيقي

لمزيد من التفاصيل، راجع: سمات الجدول

أحداث طاولة إلسا

المعلمة	يوضح	يكتب	قيمة اختيارية	القيمة الافتراضية
تغيير الاختيار	يتم تشغيل هذا الحدث عندما يتغير التحديد	الوظيفة (التحديدات)

لمزيد من التفاصيل، راجع: أحداث الجدول

ملحوظة: يصعب تنفيذ بعض الأحداث بناءً على بنية الملف الحالية (مثل: الفرز، والتصفية، ودمج النماذج...)، ويمكن تنفيذها عن طريق تحديد محتوى ملف التكوين في البيانات (بدلاً من طريقة الاستيراد) )

شكل إلسا

الاستخدام:

1. تحديد نموذج نموذج بيانات النموذج
2. تكوين حقل النموذج وتحديد التخطيط (اختياري)

 < elsa-form :config =" fields " :model =" model " labelWidth =" auto " label-suffix =" : " >
  < el-row type =" flex " justify =" center " >
    < el-button @click =" submit " type =" primary " >提交</ el-button >
    < el-button @click =" reset " type =" warning " style =" margin-left:10px; " >重置</ el-button >
  </ el-row >
</ elsa-form > 

 export default {
  data ( ) {
    return {
      fields : {
        name : {
          label : '用户名' ,
          elTag : 'el-input' ,
          elAttrs : {
            placeholder : '请输入用户名'
          } ,
          customRender : 'nameCheck' ,
          rules : [ { required : true , message : '用户名不能为空' , trigger : 'change' } ]
        } ,
        password : {
          label : '密码' ,
          elTag : 'el-input' ,
          elAttrs : {
            type : 'password' ,
            showPassword : true
          } ,
          rules : [ { required : true , trigger : 'change' } ]
        }
      } ,
      model : {
        name : '' ,
        password : ''
      }
    }
  }
}

سمات ElsaForm

المعلمة	يوضح	يكتب	قيمة اختيارية	القيمة الافتراضية
التكوين	تكوين عنصر النموذج	هدف
نموذج	نموذج بيانات النموذج	هدف
تَخطِيط	تخطيط النموذج	صفيف
عاجز	تم تعطيل النموذج بأكمله	منطقية		خطأ شنيع
...elProps	تكوين عنصر النموذج	هدف

ElsaForm.config

المعلمة	يوضح	يكتب	قيمة اختيارية	القيمة الافتراضية
مجال	حقول عناصر النموذج، المقابلة لسمات النموذج	هدف
field.label	اسم	خيط
field.elTag	علامة شكل العنصر	خيط	el-input/select/radio/cascader/date-picker/time-picker/upload
field.elAtrs	سمات عناصر النموذج (راجع المكون المقابل لـ elTag)	هدف
field.elStyle	نمط نمط عنصر النموذج	هدف
field.extra	رسالة سريعة	خيط
field.extraIcon	أيقونة أيقونة الرسالة السريعة	خيط		el-icon-warning-outline
قواعد المجال	قواعد التحقق من صحة النموذج	صفيف
field.options	عندما يتم التحقق منه، يتم استخدام التحديد لعرض البيانات	صفيف
field.visible	الربط، يمكنك التحكم في العرض والإخفاء حسب الموديل[مقدم]	منطقية/سلسلة/دالة({model})
field.customRender	يتم عرض القالب على الجانب الأيمن من elTag	خيط
field.slotRender	قالب داخل elTag (على سبيل المثال: المحتوى قيد التحميل)	خيط

لمزيد من التفاصيل، راجع: طرق عنصر النموذج

ElsaForm.field.elAtrs

مثال على بعض الخصائص الخاصة

المعلمة	يوضح	يكتب	قيمة اختيارية	القيمة الافتراضية
عاجز	إبطال	الوظيفة({نموذج})/ منطقية
isRemote	elTag عبارة عن تحميل كسول لـ el-select	منطقية
RemoteMethod	elTag عبارة عن تحميل كسول لـ el-select	الوظيفة (تم، {نموذج}) / منطقية
كسول	elTag عبارة عن تحميل بطيء لـ el-cascader	منطقية
lazyLoad	elTag عبارة عن تحميل بطيء لـ el-cascader	الوظيفة (عقدة، حل، { تم }) / Boolean

ElsaForm.layout

المعلمة	يوضح	يكتب	قيمة اختيارية	القيمة الافتراضية
elTag	علامة شكل العنصر	خيط	الصف / العقيد
elAttrs	سمات عناصر النموذج (راجع المكون المقابل لـ elTag)	هدف
أطفال	طفل	هدف
مجال	حقول عناصر النموذج	خيط

ElsaForm.elProps

المعلمة	يوضح	يكتب	قيمة اختيارية	القيمة الافتراضية
عرض التسمية	عرض تسمية حقل النموذج	خيط
لاحقة التسمية	لاحقة لتسميات حقل النموذج	خيط
مقاس	مقاس	خيط	متوسطة / صغيرة / صغيرة

لمزيد من التفاصيل، راجع: سمات النموذج

طرق إلسافورم

المعلمة	يوضح	يكتب	قيمة اختيارية	القيمة الافتراضية
التحقق من صحة	التحقق من صحة بيانات النموذج	وظيفة (خطأ، نموذج)
إعادة تعيين الحقول	إعادة تعيين عنصر النموذج	الوظيفة (الدعائم <صفيف | سلسلة>)
ClearValidate	مسح نتائج التحقق	الوظيفة (الدعائم <صفيف | سلسلة>)

لمزيد من التفاصيل، راجع: طرق النموذج