Field Configurable Property

The properties of the field configuration can be dynamically modified using the setOptions method.

this.$refs.generateForm.setOptions(['fieldId'], {
  required: false,
  total: 100
})

Common Property

options: {

  customClass: '', // Custom Style
  isLabelWidth: false, // Whether to display the lable
  labelWidth: 100, // Tag width, effective when isLabelWidth is true
  hidden: false, // Hide the property
  disabled: false, // Disable
  dataBind: true, // Data binding properties
  required: false, // Required
  width: 100, //Width
}

Individual Property

Single Line Text

{
  type: 'input',
  options: {
    dataType: '', // data type
    dataTypeCheck: false, // Whether data type validation is enabled
    dataTypeMessage: '', // Data type validation error message
    pattern: '', // regular expression
    patternCheck: false, // Whether regular expression validation is enabled
    patternMessage: '', // Regular expression validation error message
    placeholder: '', // placeholder
    showPassword: false, // display password
    clearable: false, // Whether it can be removed
    maxlength: '', // Maximum input length
    showWordLimit: false, // Whether to display the input length
  }
}

Multi-line Text

{
  type: 'textarea',
  options: {
    pattern: '', // regular expression
    patternMessage: '', // Regular expression validation error message
    placeholder: '', // placeholder
    maxlength: '', // Maximum input length
    showWordLimit: false, // Whether to display the input length
    rows: 2, // The number of lines in the box
    autosize: false // Whether the height is adaptive
  }
}

Counter

{
  type: 'number',
  options: {
    defaultValue: 0,
    min: 0, // least value
    max: 9, // maximum value
    step: 1, // step value
    controls: true, // Whether to use control buttons
    controlsPosition: '', // Control button position
    precision: 0, // precision
  }
}

Radios

{
  type: 'radio',
  options: {
    inline: false, // Layout mode, whether inside the line
    showLabel: false, // Whether to display option labels
    options: [], // Static option
    remote: false, // Is it dynamic data
    remoteType: 'datasource', // Dynamic data type
    remoteOption: '', // The dynamic data is the variable name of the assigned variable
    remoteFunc: '', // The dynamic data is the function name of the method function
    props: {
      value: 'value', // Dynamic data option value configuration
      label: 'label' // Dynamic data option label configuration
    },
  }
}

Checkbox

{
    type: 'checkbox',
    options: {
      inline: false, // Layout mode, whether inside the line
      showLabel: false, // Whether to display option labels
      options: [], // Static option
      remote: false, // Is it dynamic data
      remoteType: 'datasource', // Dynamic data type
      remoteOption: '', // The dynamic data is the variable name of the assigned variable
      remoteFunc: '', // The dynamic data is the function name of the method function
      props: {
        value: 'value', // Dynamic data option value configuration
        label: 'label' // Dynamic data option label configuration
      },
    }
  }

ComboBox

{
  type: 'select',
  options: {
    multiple: false, // Whether to choose more than one
    clearable: false, // Whether it can be removed
    placeholder: '', // placeholder
    filterable: false, // Whether it is searchable
    showLabel: false, // Whether to display option labels
    options: [], // Static option
    remote: false, // Is it dynamic data
    remoteType: 'datasource', // Dynamic data type
    remoteOption: '', // The dynamic data is the variable name of the assigned variable
    remoteFunc: '', // The dynamic data is the function name of the method function
    props: {
      value: 'value', // Dynamic data option value configuration
      label: 'label' // Dynamic data option label configuration
    },
  }
}

TimePicker

{
  type: 'time',
  options: {
    readonly: false, // Whether it is read only
    editable: true, // Whether the text box is inputable
    clearable: true, // Whether it can be cleared
    placeholder: '', // placeholder
    startPlaceholder: '', // Placeholder content, effective when isRange is true
    endPlaceholder: '', // Placeholder content, effective when isRange is true
    isRange: false, // Whether range selection
    arrowControl: false, // Whether to use arrows for time selection
    format: 'HH:mm:ss' // time format
  }
}

DatePicker

{
  type: 'date',
  options: {
    readonly: false, // Whether it is read only
    editable: true, // Whether the text box is inputable
    clearable: true, // Whether it can be cleared
    startPlaceholder: '', // Placeholder content, the type = daterange | datetimerange
    endPlaceholder: '', // Placeholder content, the type = daterange | datetimerange
    type: 'date', // Date picker type, year|month|date|dates|datetime|daterange|datetimerange
    format: 'YYYY-MM-DD', // date format
    timestamp: false // Whether to get a timestamp
  }
}

Rate

{
  type: 'rate',
  options: {
    max: 5, // maximum value
    allowHalf: false, // Whether to allow semi-selection
    showScore: false, // Whether to display the score
  }
}

Color Picker

{
  type: 'color',
  options: {
    showAlpha: false, // Support for transparency selection
  }
}

Switch

Slider

{
  type: 'slider',
  options: {
    min: 0, // least value
    max: 100, // maximum value
    step: 1, // step value
    showInput: false, // Whether to display the input box
  }
}

Text

HTML

Button

{
  type: 'button',
  options: {
    buttonType: '', // Button Type
    buttonPlain: false, // Simple button
    buttonRound: false, // Round corner button
    buttonCircle: false, //Round button
    buttonName: 'Button', //Text button 
  }
}

Link

{
  type: 'link',
  options: {
    linkType: 'default', // link type
    linkName: 'Link', // link name
    underline: true, // Whether it has underlined or not
    blank: true, // Whether to open in a new window
    href: '', // link url
  }
}

Cascade Selector/Tree Selector

{
  type: 'cascader',
  options: {
    placeholder: '', // placeholder
    clearable: false, // Whether the clear button is displayed
    options: [], // Static option
    remote: false, // Is it dynamic data
    remoteType: 'datasource', // Dynamic data type
    remoteOption: '', // The dynamic data is the variable name of the assigned variable
    remoteFunc: '', // The dynamic data is the function name of the method function
    props: {
      value: 'value', // Dynamic data option value configuration
          label: 'label' // Dynamic data option label configuration
        },
    multiple: false, // multiple choice
    filterable: false, // Whether selector is filterable
    checkStrictly: false // Any node can be selected
  }
}

Steps

{
  type: 'steps',
  options: {
    steps: [], // Step Options Static data
    props: {
      title: 'title', // Dynamic data option title
      description: 'description' // Dynamic data option description
    },
    remote: false, // Whether to use dynamic data (data source)
    direction: 'horizontal', //  Show direction
    processStatus: 'process', // The state of the current step
    finishStatus: 'finish', // End step status
    alignCenter: false, // align center
    simple: false, // terse style
    space: '' // Step spacing


    }
}

Transfer

{
  type: 'transfer',
  options: {
    data: [], // Transfer option static data
    props: { 
      key: 'key', // Transfer  dynamic option binding key
      label: 'label', // Transfer  dynamically binds the label
      disabled: 'disabled' // Transfer  dynamic option binds disabled
        },
    filterable: false, // Whether it is searchable
        remote: false, // Option whether dynamic data (data source)
            titles: ['Source', 'Target'] // Title of list
    }
}

Pagination

{
  type: 'pagination',
  options: {
    background: true, // Button background color
    pageSize: 10, // Displays the number per page
    pagerCount: 7, // Number of page number buttons
    total: 100, // Total number of items
    }
}

Custom Zone

{
  type: 'blank',
  options: {
    defaultType: 'String', // 绑定数据类型
  }
}

Custom Component

{
  type: 'component',
  options: {
    template: '<div>custom content</div>', // Custom templates
  }
}

File

{
  type: 'fileupload',
  options: {
    domain: 'https://tcdn.form.making.link/', // QiNiu domain configuration domain, effective when isQiniu=true
        tip: '', // prompt message
    action: 'https://tools-server.making.link/api/transfer', // Upload address, effective when isQiniu=false
    limit: 9, // Maximum uploads
    multiple: false, // Whether multiple files can be selected
    isQiniu: false, // Whether to use Qiniu upload
    headers: [], // Request header configuration, effective when isQiniu=false
    withCredentials: false // Whether the cross-domain request provides credential information, effective when isQiniu=false
  }
}

Image

{
  type: 'imgupload', 
  options: {
    size: {
      width: 100, // Upload frame width
      height: 100, // Upload frame height
    },
    domain: 'https://tcdn.form.making.link/', // Qiniu configuration domain, effective when isQiniu=true
        readonly: false, // Whether it is read only
    limit: 8, // Maximum uploads
    multiple: false, // Whether multiple files can be selected
    isQiniu: false, // Whether to use Qiniu upload
    isDelete: true, // Whether it can be deleted
    min: 0, // Minimum upload number
    isEdit: true, // Whether it can be edited
    action: 'https://tools-server.making.link/api/transfer', // Upload address, effective when isQiniu=false
    headers: [], // Request header configuration, effective when isQiniu=false
    withCredentials: false // Whether the cross-domain request provides credential information, effective when isQiniu=false
  }
}

Editor

{
  type: 'editor',
  options: {
    customToolbar: [
      [ 'bold', 'italic', 'underline', 'strike', 
        { 'color': [] }, 
        { 'background': [] }, 
        { 'align': [] },
        { 'list': 'ordered'}, 
        { 'list': 'bullet' },
        { 'indent': '-1'}, 
        { 'indent': '+1' }
      ], 
      [{ 'font': [] },{ 'header': [1, 2, 3, 4, 5, 6, false] }],               
      [{ 'script': 'sub'}, { 'script': 'super' }],  
      ['link', 'image','blockquote', 'code-block'],
      [{ 'direction': 'rtl' }], 
      ['clean'] 
    ], // Rich text toolbar configuration
    }
}

Subform/Subform+

{
  type: 'table',
  options: {
    paging: false, // Pagination or not
    pageSize: 5, // Displays the number of entries per page
    isAdd: true, // Whether rows can be added
    isDelete: true, // Whether rows can be deleted
    showControl: true, // Display control button
    }
}

Dialog

{
  type: 'dialog',
  options: {
    visible: false, // Display dialog box
    title: 'Dialog Title', // title
    top: '15vh', // Distance from top
    center: false, // Align center
    cancelText: 'Cancel', //Cancel button text
    showClose: true, // Display the close button
    okText: 'Confirm', // Confirm button 
    showCancel: true, // Whether the cancel button is displayed
    showOk: true, // Whether the cancel button is displayed Whether the confirm button is displayed
    confirmLoading: false // Confirm the Loading effect of the button
    }
}

Group

None

Field Configurable Property ​

Common Property ​

Individual Property ​

Single Line Text ​

Multi-line Text ​

Counter ​

Radios ​

Checkbox ​

ComboBox ​

TimePicker ​

DatePicker ​

Rate ​

Color Picker ​

Switch ​

Slider ​

Text ​

HTML ​

Button ​

Link ​

Cascade Selector/Tree Selector ​

Steps ​

Transfer ​

Pagination ​

Custom Zone ​

Custom Component ​

File ​

Image ​

Editor ​

Subform/Subform+ ​

Dialog ​

Group ​

Field Configurable Property

Common Property

Individual Property

Single Line Text

Multi-line Text

Counter

Radios

Checkbox

ComboBox

TimePicker

DatePicker

Rate

Color Picker

Switch

Slider

Text

HTML

Button

Link

Cascade Selector/Tree Selector

Steps

Transfer

Pagination

Custom Zone

Custom Component

File

Image

Editor

Subform/Subform+

Dialog

Group