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: [String]Field control width
• minWidth: [String]Minimum width of field control
• colspan: [Number]Share 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

|propertyName|type|default|description| |------------|----|-------|-----------| |fieldConfig|FieldConfig|--|Form configuration information| |labelWidth|string|--|Form item label width| |rules|object|--|Form verification rules| |columnNum|number|6|Form layout rules, specifying how many columns are distributed in one row|

CurdForm Events

|eventName|arguments|description| |---------|---------|-----------| |action|{eventType,field,model,data}|eventType:The type of event received, field: Field configuration information, model:Form bound data, data: The data passed through the event is organized in the form of an array| |update|data|Triggered when the data bound by the form is updated to pass the latest data|

CurdForm Methods

|methodName|arguments|returnValue|description| |---------|---------|------------|-----------| |getModel|--|The data of form|get form data| |setModel|data|void|Set form data| |updateModel|data|void|Update or merge form data| |resetModel|data|void|Reset form data| |validate|callback|void|Verify the data of the form, and execute callback to call back the verification result after verification| |resetFields|--|void|Reset the verification status of the form|

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

|propertyName|type|default|description| |------------|----|-------|-----------| |fieldConfig|FieldConfig|--|Table configuration information| |fetchMethod|Function({page,pageSize, resolve})|--|Method of loading data, it must return a promise object| |width|String,Number|100%|width of table| |height|String,Number|100%|height of table| |showSummary|Boolean|true|Show statistics column of table| |summaryMethod|Function({columns, data})|--|Methods for statistical data| |spanMethod|Function({ row, column, rowIndex, columnIndex })|--|How to merge cells| |rowStyle|Function({row, rowIndex})/Object|--|How to style within a table row| |cellStyle|Function({row, column, rowIndex, columnIndex})/Object|--|How to style within a table cell| |rowClassName|Function({row, rowIndex})/String|--|How to set table row style class| |cellClassName|Function({row, column, rowIndex, columnIndex})/String|--|How to set table row cell class| |pageAble|Boolean|true|Whether to open pagination in the table| |indexAble|Boolean|false|Whether to open sequential index for table| |selectAble|Boolean|false|Whether the multi selection function is enabled for the table| |striple|Boolean|true|Draw border for table| |selectOnClickRow|Boolean|false|Select the row when click it| |highlightCurrentRow|Boolean|true|current row is hightlight| |editType|String|stright-edit|Edit type of table, These types are supported: stright-edit、inline-edit、dialog-edit、no-edit| |saveMethod|Function(data)|--|The save data callback method will return the data to be saved for use| |fetchDictionaryMethod|Function(dicFieldName)|--|Method of querying dictionary| |transformDictionaryMethod|Function(value, dicData)|--|Methods of dictionary translation| |value|Array|--|Data passed into table, Effective when requesttype is outside| |requestType|String|inside|Route of incoming data, Value takes effect when requesttype is outside, and fetchmethod takes effect when requesttype is inside|

CurdTable Events

|eventName|arguments|description| |---------|---------|-----------| |page-change|pageNum|Triggered when turning pages| |selection-change|selection|Triggered when the selection status changes| |row-click|row, column, event|Triggered when you left-click a row| |row-dblclick|row, column, event|Triggered when a row is double clicked| |cell-click|row, column, cell, event|Triggered when a cell is clicked| |cell-dblclick|row, column, cell, event|Triggered when a cell is double clicked| |row-contextmenu|row, column, event|Triggered when the menu is right clicked| |header-click|column, event|Triggered when the header is clicked| |header-contextmenu|column, event|Triggered when you right-click the header| |current-change|currentRow, oldCurrentRow|Triggered when the selected row changes| |sort-change|{ column, prop, order }|Triggered when the sort changes| |filter-change|filters|Triggered when the filter condition changes| |expand-change|row, expandedRows, expanded|Triggered when a row is expanded| |select|selection, row|Triggered on manual selection| |select-all|selection|Triggered when manually selecting all|

CurdTable Methods

|methodName|arguments|returnValue|description| |---------|---------|------------|-----------| |getPage|--|The page info of table|get page info| |editData|--|void|Edit table data in corresponding forms according to different edittypes| |insertRow|row,arg|void|Insert a new row into the table. The row defaults to empty row data. Arg can be Boolean or numeric. When arg is true, it means inserting at the head, when arg is false, it means inserting at the tail, and when arg is a specified number, it means inserting at the specified index position| |removeRow|arg|void|To delete a specified row in a table, Arg can be transferred to a number or a data object. If it is transferred to a number, it means to delete the specified index row. If it is transferred to a data object, it means to delete the specified data row| |getSelection|--|selection|Gets the selected data row| |removeSelectionRow|--|void|Delete the selected data row. It takes effect when selectable is true| |exportExcel|filename|void|Export tabular data to excel file| |request|--|void|Request data of the table| |refresh|--|void|Refresh tabular data to excel file| |setData|data|void|Set data for table| |clearData|--|void|Clear table data| |getData|--|data|Get table data| |clearSelection|--|viod|Clear selected status| |toggleRowSelection|row, checked|viod|Toggles the selected state of the table row| |toggleRowSelection|row, checked|viod|Toggles the selected state of the table row| |toggleAllSelection|--|viod|Toggle select all status| |toggleRowExpansion|row, expanded|viod|Toggles the expanded state of rows| |setCurrentRow|row|viod|Sets the currently selected row| |clearSort|--|viod|Clear sort status| |clearFilter|--|viod|Clear filter status| |doLayout|--|viod|Table redrawing and rearrangement| |sort|prop, order|viod|Sort the data in the table| |validate|callback|viod|After verifying the data in the table, callback will be called to transfer out the verification status|