my crud

بلدي الخام

يقدم

my-crud هو مكون جدول vue تم تعديله بناءً على D2-Crud ويحتوي على نموذج إضافة وحذف وتعديل بسيط، ويضيف بعض الوظائف أكثر من الإصدار الأصلي.

وظيفة

• يرث كافة وظائف الجداول في العنصر
• إضافة بيانات الجدول
• تعديل بيانات الجدول
• حذف بيانات الجدول
• استخدم المكونات الموجودة في العنصر لعرض محتوى الجدول ومحتوى النموذج
• التحقق من صحة النموذج
• التحرير داخل الجدول
• تقديم المكونات المخصصة

ثَبَّتَ

استخدم نبم

npm i element-ui my-element-crud -S

استخدامها في المشاريع

اكتب المحتوى التالي في main.js :

 import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import D2Crud from 'my-element-crud'

Vue . use ( ElementUI )
Vue . use ( D2Crud )

new Vue ( {
  el : '#app' ,
  render : h => h ( App )
} )

يمكنك بعد ذلك استخدام D2-Crud في مشروعك.

CDN

العوامل الخارجية: D2Crud

https://cdn.d2.pub/packages/@d2-projects/[email protected]/d2-crud.js

تعديل التصحيح

2020/10/12

• أضف أزرارًا مخصصة والمزيد من الخيارات المنسدلة

        custom: [
          {
            text : '更多' ,
            type : 'text' ,
            // size: 'small',
            sort : 8 ,
            emit : 'custom-edit' ,
            show : ( index , row ) => true ,
            more : [
              {
                text : '!!!!!' ,
                emit : 'custom-pop' ,
                show : ( index , row ) => true
              }
            ]
          }
        ]

• أضف وظيفة ربط الأحداث والخصائص في addtemplateedittemplate إلى مكون العنصر
• @ البادئة هي حدث مكون
• : البادئة هي سمة المكون

 mycom2 : {
            title : "自带选择框" ,
            value : "" ,
            _sort : 4 ,
            component : {
              name : "el-select" ,
              options : [
                { label : "测试1" , value : 1 } ,
                { label : "测试2" , value : 2 } ,
              ] ,
              // 事件绑定
              '@change' : ( e ) => {
                console . log ( this . rowHandle ) ;
              } ,
              // 属性绑定
              ':size' : 'mini'
            } ,
          } ,

• حل مشكلة عدم إمكانية تمرير حدث تغيير بيانات النموذج الخاص بمربع التحديد المضمن بشكل صحيح إلى المكون الأصلي

• إضافة زر عرض مخصص

• إضافة وظيفة العرض، يتم تعطيل العناصر بشكل افتراضي عند المشاهدة

• يحتاج المكون المخصص المعطل إلى إضافة معطل: منطقي في الدعائم. اكتب سمة المكون: :disabled='disabled'.

• يستخدم:

 < d2-crud v-bind : look-template = "addTemplate" > </ d2-crud >
rowHandle: {
  look : {
    text : "查看" ,
    emit : "lookHandle"
  } ,
}

• إضافة وظيفة فرز الأزرار المخصصة

• يستخدم:

rowHandle: {
  minWidth : "180px" ,
  look : {
    text : "查看" ,
    emit : "lookHandle" ,
    sort : 3
  } ,
  customs : [ {
      text : '打卡记录' ,
      emit : 'showRecord' ,
      sort : 2
    } ] ,
  edit : {
    text : "编辑" ,
    emit : "editHandle" ,
    type : "warning " ,
    sort : 1
  } ,

  }

• إضافة عرض نص عادي
• يستخدم:

rowHandle: {
  lookNoEle : {
    text : "查看" ,
    emit : "lookHandle"
  } ,
}

• تخصيص منسق العرض
• يستخدم:

 mycom : {
    title : "选择框" ,
    value : "" ,
    component : {
      name : testCom ,
      formatter ( val ) {
        return val === 1 ? "测试1" : "测试2" ;
      } ,
      props : {
        options : [
          { label : "测试1" , value : 1 } ,
          { label : "测试2" , value : 2 }
        ]
      }
    }
  } ,

• عرض مخصص مع فئات قابلة للتخصيص
• يستخدم:

 roleName : {
    title : "角色名" ,
    value : "" ,
    class : "my_label" ,
    component : {
      placeholder : " 仅可输入英文大小写、数字"
    }
  } ,

- إضافة عرض ديناميكي ونموذج نموذج مخفي

• الاستخدام: يجب وضع قيمة addTemplate في السمة المحسوبة. قم بتعيين قيمة العرض حسب الحاجة. عند فتح النموذج، إذا تم تعديله وعرضه، فيجب أيضًا تعيين قيمة العرض.

 roleName : {
    title : "角色名" ,
    value : "" ,
    class : "my_label" ,
    component : {
      show : this . show === 1
      placeholder : " 仅可输入英文大小写、数字"
    }
  } ,

اضبط عرض مربع حوار النموذج: add-width="400px" :edit-width="400px"

=======

• قم بإضافة مكونات مخصصة في النموذج للاتصال ببعضها البعض
• استخدم $emit('componentEvent') في المكون المخصص لإرسال الأحداث إلى المكون الأصلي، ويستخدم المكون الأصلي @componentEvent:#{custom المكون key}="handle" لاستلامه
• يستخدم المكون الأصلي $refs.d2Crud.getRef("#{مفتاح المكون المخصص}").handleComponentEvent(data) لإرسال الوظيفة - استخدم:

المكون الأصلي

 < d2-crud
@componentEvent:coma =" handle " >
</ d2-crud > 

 computed : {
  addTemplate ( ) {
    return {
      coma : {

            title : "自定义选择框a" ,
            value : "" ,
            component : {
              name : coma ,

              } ,
    } ,
    comb : {
            title : "自定义选择框b" ,
            value : "" ,
            component : {
              name : comb ,
        } ,
      } ,
    }
  } ,
  method : {
  handle ( data ) {
      this . $refs . d2Crud . getRef ( "comb" ) . handleComponentEvent ( data ) ;
    } }

المكون أ

 <template>
  <div>
    <el-button @click="up">up123</el-button>
  </div>
</template>

      up() {
        this.$emit("componentEvent", 123);
      }

المكون ب

  methods: {
    handleComponentEvent ( data ) {
      this . data = data
    }
  }