Support for most Element UI Form types, with new composite input fields and form grouping capabilities, based on vue2

Inline forms, compound input boxes:

Form grouping:

The data of the data is an array

Form type:

Supported form types that allow column widths and hidden properties to be set in objects

vue element form to object

download

npm install el-form-model
Copy the code

reference

import ElFormModel from 'el-form-model'
Vue.use(ElFormModel)
Copy the code

Reference – Default parameter (optional)

Vue.use(ElFormModel, {
  global: {
    placeholder: {
      input: 'Please enter'.select: 'Please select'}},component: {
    form: {},
    input: {
      clearable: true
    },
    autocomplete: {
      clearable: true
    },
    select: {
      clearable: true
    },
    cascader: {},
    date: {},
    dates: {},
    datetime: {},
    month: {},
    year: {},
    daterange: {
      unlinkPanels: true.rangeSeparator: 'to'.startPlaceholder: 'Start date'.endPlaceholder: 'End Date'.defaultTime: ['00:00:00'."23:59:59"]},datetimerange: {
      unlinkPanels: true.rangeSeparator: 'to'.startPlaceholder: 'Start time'.endPlaceholder: 'End time'.defaultTime: ['00:00:00'."23:59:59"]},monthrange: {
      unlinkPanels: true.rangeSeparator: 'to'.startPlaceholder: 'Start month'.endPlaceholder: 'End month'.defaultTime: ['00:00:00'."23:59:59"]},time: {},
    radio: {},
    checkbox: {},
    count: {},
    switch: {},
    slider: {},
    rate: {},
    color: {}}})Copy the code

component

Component – inline

<template>
  <el-form-model
    ref="myForm"
    :inline="true"
  />
</template>
Copy the code

Component – column width

<template>
  <el-form-model
    ref="myForm"
    label-width="100px"
    :inline="false"
  />
</template>
Copy the code

Component – Inheriting Component Attributes

<template>
  <el-form-model
    ref="myForm"
    label-width="100px"
    :inline="false"
    :hide-required-asterisk="true"
    :show-message="true"
    :inline-message="true"
  />
</template>
Copy the code

Component – Inherits component Events (Element Form Events)

<template>
  <el-form-model
    ref="myForm"
    label-width="100px"
    :inline="false"
    @validate="onValidate"
  />
</template>
Copy the code

Component – Execute component events (Element Form Methods)

methods: {
  setForm() {
    this.$refs.myForm.onFormMethod('validate'[valid= > {
      console.log('validate', valid)
    }])
  }
}
Copy the code

data

Data – Default value, type

<template>
  <el-form-model
    ref="myForm"
    label-width="100px"
    :inline="false"
    :data="data"
    :items="items"
  >
    <template v-slot:optionSlot="{ value }">
      <i class="el-icon-edit" /> {{ value }}
    </template>
    <template v-slot:myCustomContent>Custom content areas</template>
  </el-form-model>
</template>
Copy the code

data() {
  return {
    data: {
      myInput: 'apple'.myAutocomplete: 'banana'.mySelect: 0.myCascader: ['zhinan'.'shejiyuanze'].myTime: 1628072756566.myDate: '2020-01-01'.myDates: ['2020-01-01'.'2020-01-02'].myDatetime: 1628072756566.myMonth: 'the 2020-01'.myYear: '2020'.myDateRangeStart: '2020-01-01'.myDateRangeEnd: '2020-12-31'.myDatetimeRangeStart: 1628072756566.myDatetimeRangeEnd: 1688072756566.myMonthRangeStart: 'the 2020-01'.myMonthRangeEnd: '2020-12'.myTextarea: 'orange'.myRadio: 1.myCheckbox: [0.1].myCount: 3.mySwitch: true.mySlider: 56.myRate: 5
    },
    items: [{ 
      label: 'Input field'.prop: 'myInput'.type: 'input' //input, number, password, tel, email, url, search
    }, {
      labels: ['Inline forms only'.'Multiple input fields'].props: ['myInput1'.'myInput2'].type: 'inputs'
    }, { 
      label: 'autocomplete'.prop: 'myAutocomplete'.type: 'autocomplete'.fetchSuggestions: this.querySearch
    }, {
      label: 'Drop-down box'.prop: 'mySelect'.type: 'select'.options: [{label: 'option 1'.value: 0 },
        { label: 'option 2'.value: 1 },
        { label: 'optionSlot'.value: 2.type: 'slot'}]}, {label: 'Cascade selector'.prop: 'myCascader'.type: 'cascader'.options: [{
        value: 'zhinan'.label: 'guide'.children: [{
          value: 'shejiyuanze'.label: 'Design Principles'}}]]}, {label: 'time'.prop: 'myTime'.type: 'time'.valueFormat: 'timestamp'
    }, {
      label: 'date'.prop: 'myDate'.type: 'date'.valueFormat: 'yyyy-MM-dd'
    }, {
      label: 'Multiple dates'.prop: 'myDates'.type: 'dates'.valueFormat: 'yyyy-MM-dd'
    }, {
      label: 'Date time'.prop: 'myDatetime'.type: 'datetime'.valueFormat: 'timestamp'
    }, {
      label: '月份'.prop: 'myMonth'.type: 'month'.valueFormat: 'yyyy-MM'
    }, {
      label: 'year'.prop: 'myYear'.type: 'year'.valueFormat: 'yyyy'
    }, {
      label: 'Date range'.props: ['myDateRangeStart'.'myDateRangeEnd'].type: 'daterange'.valueFormat: 'yyyy-MM-dd'
    }, {
      label: 'Date time range'.props: ['myDatetimeRangeStart'.'myDatetimeRangeEnd'].type: 'datetimerange'.valueFormat: 'timestamp'
    }, {
      label: 'Month range'.props: ['myMonthRangeStart'.'myMonthRangeEnd'].type: 'monthrange'.valueFormat: 'yyyy-MM'
    }, {
      label: 'Long text box'.prop: 'myTextarea'.type: 'textarea'.autosize: {
        minRows: 2.maxRows: 6}}, {label: 'Checkbox'.prop: 'myRadio'.type: 'radio'.options: [{label: 'option 1'.value: 0 },
        { label: 'option 2'.value: 1}]}, {label: 'Multiple checkboxes'.prop: 'myCheckbox'.type: 'checkbox'.options: [{label: 'option 1'.value: 0 },
        { label: 'option 2'.value: 1}]}, {label: 'counter'.prop: 'myCount'.type: 'count'
    }, {
      label: 'switch'.prop: 'mySwitch'.type: 'switch'
    }, {
      label: 'block'.prop: 'mySlider'.type: 'slider'
    }, {
      label: 'score'.prop: 'myRate'.type: 'rate'
    }, {
      label: The 'color'.prop: 'myColor'.type: 'color'
    }, {
      label: 'Custom content'.prop: 'myCustomContent'.type: 'slot'}}}]Copy the code

Data – Change the default value

methods: {
  setValue() {
    this.data = { ... this.$refs.myForm.form,myTime: +new Date()}}}Copy the code

Data – column width (effective when not in line form)

data() {
  return {
    items: [{ 
      label: 'Input field'.prop: 'myInput'.type: 'input'.width: '50%'}}}]Copy the code

Data-hide

data() {
  return {
    items: [{ 
      label: 'Input field'.prop: 'myInput'.type: 'input'.hidden: true}}}]Copy the code

Data – Inheriting Element Form Item Attributes

data() {
  return {
    items: [{ 
      label: 'Input field'.prop: 'myInput'.type: 'input'.minlength: 6.placeholder: 'Please enter... '.clearable: true.prefixIcon: 'el-icon-edit'.rules: [{required: true.message: 'Please enter... '.trigger: 'blur'}]}}Copy the code

Data – Inherit child Events (Element Form Item Events)

data() {
  return {
    items: [{ 
      label: 'Input field'.prop: 'myInput'.type: 'input'.events: {
        focus: e= > {
          console.log('myInput focus', e)
        },
        blur: e= > {
          console.log('myInput blur', e)
        },
        change: val= > {
          console.log('myInput change', val)
        }
      }
    }]
  }
}
Copy the code

Data – Groups

<template>
  <el-form-model
    ref="myForm"
    label-width="100px"
    :inline="false"
    :data="data"
    :items="items"
  >
    <template v-slot:addButton>
      <el-button 
        type="primary"
        icon="el-icon-plus"
        @click="$refs.myForm.onAddGroup('myGroup')"
      />
    </template>
    <template v-slot:delButton="{ item }">
      <el-button 
        type="danger"
        icon="el-icon-minus"
        :disabled="items.find(item => item.prop === 'myGroup').count <= 1"
        @click="$refs.myForm.onDelGroup('myGroup', item.index)"
      />
    </template>
  </el-form-model>
</template>
Copy the code

data() {
  return {
    data: {
      myGroup: [{title: 'baidu'.url: 'http://www.baidu.com' },
        { title: 'qq'.url: 'http://www.qq.com'}},items: [{
      prop: 'addButton'.type: 'slot'.width: '100%'}, {prop: 'myGroup'.type: 'group'.children: [{
        label: 'title'.prop: 'title'.type: 'input'.width: 'calc(50% - 50px)'
      }, {
        label: 'address'.prop: 'url'.type: 'input'.width: 'calc(50% - 50px)'
      }, {
        prop: 'delButton'.type: 'slot'.width: '100px'}}}}]]Copy the code

button

Button – Object (Weight: Low)

<template>
  <el-form-model
    label-width="100px"
    :inline="false"
    :items="items"
    :buttons="buttons"
  />
</template>
Copy the code

data() {
  return {
    buttons: [{ 
      text: 'submit'.size: 'small'.type: 'primary'.submitEvent: this.onSubmit
    }, {
      text: 'reset'.size: 'small'.resetEvent: this.onReset
    }]
  }
}
Copy the code

methods: {
  async onSubmit(event) {
    const { type, form, valid } = await event()
    console.log('onSubmit', type, form, valid)
  },
  async onReset(event) {
    const { type, form, valid } = await event()
    console.log('onReset', type, form, valid)
  }
}
Copy the code

Button – slot (weight: high)

<template>
  <el-form-model
    label-width="100px"
    :inline="false"
    :items="items"
  >
    <template v-slot:button="{ submitEvent, resetEvent }">
      <el-button
        type="success"
        size="medium"
      >Customize button 1</el-button>
      <el-button
        type="primary"
        size="medium"
        @click="onSubmit(submitEvent)"
      >submit</el-button>
      <el-button
        size="medium"
        @click="onReset(resetEvent)"
      >reset</el-button>
      <el-button
        type="danger"
        size="medium"
      >Customize button 2</el-button>
    </template>
  </el-form-model>
</template>
Copy the code

methods: {
  async onSubmit(event) {
    const { type, form, valid } = await event()
    console.log('onSubmit', type, form, valid)
  },
  async onReset(event) {
    const { type, form, valid } = await event()
    console.log('onReset', type, form, valid)
  }
}
Copy the code