my crud

my-crud

introduce

my-crud is a vue table component modified based on D2-Crud. It contains a simple addition, deletion, and modification form, and adds some functions than the original version.

Function

• Inherits all functions of tables in Element
• Add table data
• Modify table data
• Delete table data
• Use components in Element to render table content and form content
• form validation
• In-table editing
• Render custom components

Install

Use npm

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

Use in projects

Write the following content in 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 )
} )

You can then use D2-Crud in your project.

CDN

externals: D2Crud

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

Patch modification

2020/10/12

• Add custom buttons and more drop-down options

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

• Add the function of binding events and properties in addtemplateedittemplate to element component
• @ prefix is ​​component event
• : The prefix is ​​the component attribute

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

• Solve the problem that the form-data-change event of the built-in selection box cannot be correctly passed to the parent component

• Add custom view button

• Add viewing function, elements are disabled by default when viewing

• Custom component disabled needs to add disabled: Boolean in props. Write the component attribute: :disabled="disabled"

• use:

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

• Add custom button sorting function

• use:

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

  }

• Add plain text viewing
• use:

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

• Customize view formatter
• use:

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

• Customized view with customizable classes
• use:

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

-- Add dynamic display and hidden form form

• Usage: The addTemplate value needs to be placed in the calculated attribute. Set the show value as needed. When the form is opened, if it is modified and viewed, the show value also needs to be set.

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

Set the width of the form dialog: add-width="400px" :edit-width="400px"

=======

• Add custom components in the form to call each other
• Use $emit('componentEvent') in the custom component to send events to the parent component, and the parent component uses @componentEvent:#{custom component key}="handle" to receive it
• The parent component uses $refs.d2Crud.getRef("#{custom component key}").handleComponentEvent(data) to dispatch the function - use:

parent component

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

Component A

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

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

Component B

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