vue-curd v1.3.2

intrudoction

vue-curd is a component solution to quickly generate tables and forms, its based on vue.js 2.x and Element-Ui, it contains two components, one is CurdTable and the other is CurdForm, here is their introduction and basic usage.

install

yarn add vue-curd

useage example

import Vue from 'vue'
import VueCurd from 'vue-curd'

Vue.use(VueCurd)

FieldConfig

Curd uses FieldConfig to render the views of corresponding tables and forms. The following are the data rules of FieldConfig. Developers must define data according to this data specification. The following are the attributes supported by FieldConfig:

• prop: String Field Name
• label: String Field alias name
• default: String Field default value
• disabled: Boolean Is the form item corresponding to the field disabled
• placeholder: String Filed form item placeholder
• show: Boolean Whether the form item corresponding to the field is displayed
• widget: String Specify the component to render the form item corresponding to the field. Widget refers to the registered name of Vue component
• slot: String When the user-defined requirements cannot be realized by configuration, the corresponding user-defined content can be distributed to curd from the outside through slot. The default value of slot is empty, which means that the default component is used for rendering or the component specified by the widget is used for rendering. When the value of slot is set, it is rendered according to the customized content of the corresponding slot specified externally
• width: StringField control width
• minWidth: StringMinimum width of field control
• colspan: NumberShare of field controls
• privateEvents: Array Field control allows events to be dispatched externally. These events will finally be aggregated and dispatched externally through action events
• privateProps: Object The private personalization property configuration of the field control depends on the specific control

CurdForm

The following is an example of CurdForm usage.

  <template>
    <curd-form
      :field-config="config"
      :label-width="labelWidth"
      :column-num="columnNum"
      @action="actionHandler"
      @update="updateHandler"
    >
    </curd-form>
  </template>
  <script>
    exoprt default {
      data: {
        config: [
          {
            colspan: 1
            default: ""
            disabled: true
            label: "userName"
            minWidth: 86
            placeholder: "please input user name"
            privateEvents: ['input', 'change']
            prop: "userName"
            show: true
            slot: ""
            widget: "ElInput"
          },
          {
            colspan: 1
            default: ""
            disabled: true
            label: "score"
            minWidth: 86
            privateEvents: ['change']
            prop: "score"
            show: true
            slot: ""
            widget: "ElRate"
          }
        ],
        labelWidth: '100px',
        columnNum: 4
      },
      methods: {
        actionHandler({eventType, field, model, data}) {
          // when the form has been operated do something
        },
        updateHandler(data) {
          // when the from data updated do something
        }
      }
    }
  </script>

CurdForm Propertys

CurdForm Events

CurdForm Methods

CurdTable

The following is an example of CurdTable usage.

<template>
  <curd-table
    width="500px"
    height="500px"
    :field-config="config"
    @row-click="rowClickHandler"
    @update="updateHandler"
  ></curd-table>
</template>
<script>
  exoprt default {
    data: {
      config: [
        {
          colspan: 1
          default: ""
          disabled: true
          label: "userName"
          minWidth: 86
          prop: "userName"
          show: true
          slot: ""
          widget: ""
        },
        {
          colspan: 1
          default: ""
          disabled: true
          label: "age"
          minWidth: 86
          prop: "age"
          show: true
          slot: ""
          widget: ""
        },
        {
          colspan: 1
          default: ""
          disabled: true
          label: "sex"
          minWidth: 86
          prop: "sex"
          show: true
          slot: ""
          widget: ""
        }
      ]
    },
    methods: {
      rowClickHandler(row, column, event}) {
        // When a table row is clicked do something
      },
      updateHandler(data) {
        // when the from data updated do something
      }
    }
  }
</script>

CurdTtable Propertys

CurdTable Events

CurdTable Methods