1. Home
  2. vue-curd

vue-curd

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

© 2023 Vuejscomponent All Rights Reserved

Introducing a blog that delves into the exciting world of Vue.js components. Stay tuned for insightful examples and valuable insights that will elevate your Vue.js development skills.