my crud

mon crud

introduire

my-crud est un composant de table vue modifié basé sur D2-Crud. Il contient un simple formulaire d'ajout, de suppression et de modification, et ajoute certaines fonctions par rapport à la version originale.

Fonction

• Hérite de toutes les fonctions des tables dans Element
• Ajouter des données de table
• Modifier les données du tableau
• Supprimer les données du tableau
• Utiliser des composants dans Element pour restituer le contenu du tableau et le contenu du formulaire
• validation du formulaire
• Modification dans le tableau
• Rendre des composants personnalisés

Installer

Utiliser npm

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

Utilisation dans des projets

Écrivez le contenu suivant dans 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 )
} )

Vous pouvez ensuite utiliser D2-Crud dans votre projet.

CDN

externes: D2Crud

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

Modification du correctif

2020/10/12

• Ajoutez des boutons personnalisés et plus d'options déroulantes

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

• Ajouter la fonction de liaison des événements et des propriétés dans addtemplateedittemplate au composant d'élément
• @ le préfixe est un événement de composant
• : Le préfixe est l'attribut du composant

 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'
            } ,
          } ,

• Résolvez le problème selon lequel l'événement form-data-change de la zone de sélection intégrée ne peut pas être correctement transmis au composant parent.

• Bouton Ajouter une vue personnalisée

• Ajouter une fonction de visualisation, les éléments sont désactivés par défaut lors de la visualisation

• Le composant personnalisé désactivé doit ajouter désactivé : booléen dans les accessoires. Écrivez l'attribut du composant : disabled="disabled".

• utiliser:

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

• Ajouter une fonction de tri des boutons personnalisés

• utiliser:

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

  }

• Ajouter l'affichage du texte brut
• utiliser:

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

• Personnaliser le formateur de vue
• utiliser:

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

• Vue personnalisée avec classes personnalisables
• utiliser:

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

-- Ajouter un affichage dynamique et un formulaire masqué

• Utilisation : La valeur addTemplate doit être placée dans l'attribut calculé. Définissez la valeur d'affichage selon vos besoins. Lorsque le formulaire est ouvert, s'il est modifié et affiché, la valeur d'affichage doit également être définie.

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

Définissez la largeur de la boîte de dialogue du formulaire : add-width="400px" :edit-width="400px"

=======

• Ajoutez des composants personnalisés dans le formulaire pour s'appeler
• Utilisez $emit('componentEvent') dans le composant personnalisé pour envoyer des événements au composant parent, et le composant parent utilise @componentEvent:#{custom composant key}="handle" pour le recevoir
• Le composant parent utilise $refs.d2Crud.getRef("#{custom composant key}").handleComponentEvent(data) pour distribuer la fonction - utilisez :

composant parent

 < 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 ) ;
    } }

Composant A

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

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

Composant B

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