阅读 1215

Element Form组件二次封装,快速构建表单应用,支持表单分组

vue element form to object

el-form-model

行内

inline

布局

layout

分组

group

下载

npm install el-form-model
复制代码

引用

import ElFormModel from 'el-form-model'
Vue.use(ElFormModel)
复制代码

引用-默认参数(可选)

Vue.use(ElFormModel, {
  global: {
    placeholder: {
      input: '请输入',
      select: '请选择'
    }
  },
  component: {
    form: {},
    input: {
      clearable: true
    },
    autocomplete: {
      clearable: true
    },
    select: {
      clearable: true
    },
    cascader: {},
    date: {},
    dates: {},
    datetime: {},
    month: {},
    year: {},
    daterange: {
      unlinkPanels: true,
      rangeSeparator: '至',
      startPlaceholder: '开始日期',
      endPlaceholder: '结束日期',
      defaultTime: ['00:00:00', '23:59:59']
    },
    datetimerange: {
      unlinkPanels: true,
      rangeSeparator: '至',
      startPlaceholder: '开始时间',
      endPlaceholder: '结束时间',
      defaultTime: ['00:00:00', '23:59:59']
    },
    monthrange: {
      unlinkPanels: true,
      rangeSeparator: '至',
      startPlaceholder: '开始月份',
      endPlaceholder: '结束月份',
      defaultTime: ['00:00:00', '23:59:59']
    },
    time: {},
    textarea: {},
    radio: {},
    checkbox: {},
    count: {},
    switch: {},
    slider: {},
    rate: {},
    color: {}
  }
})
复制代码

组件

组件-行内

<template>
  <el-form-model
    ref="myForm"
    :inline="true"
    :data="data"
    :items="items"
  />
</template>
复制代码

组件-列宽

<template>
  <el-form-model
    ref="myForm"
    label-width="100px"
    :inline="false"
    :data="data"
    :items="items"
  />
</template>
复制代码

组件-继承组件属性(Element Form Attributes)

<template>
  <el-form-model
    ref="myForm"
    label-width="100px"
    :inline="false"
    :hide-required-asterisk="true"
    :show-message="true"
    :inline-message="true"
    :data="data"
    :items="items"
  />
</template>
复制代码

组件-继承组件事件(Element Form Events)

<template>
  <el-form-model
    ref="myForm"
    label-width="100px"
    :inline="false"
    :data="data"
    :items="items"
    @validate="onValidate"
  />
</template>
复制代码

组件-执行组件事件(Element Form Methods)

export default {
  methods: {
    setForm() {
      this.$refs.myForm.onFormMethod('validate', [valid => {
        console.log('validate', valid)
      }])
    }
  }
}
复制代码

数据

数据-默认值、类型

<template>
  <el-form-model
    ref="myForm"
    label-width="100px"
    :inline="false"
    :data="data"
    :items="items"
  >
    <template v-slot:optionSlot="{ label, value }">
      <i class="el-icon-edit" />{{ label }}: {{ value }}
    </template>
    <template v-slot:myCustomContent>
      自定义内容区域
    </template>
  </el-form-model>
</template>
复制代码
export default {
  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: '2020-01',
        myYear: '2020',
        myDateRangeStart: '2020-01-01',
        myDateRangeEnd: '2020-12-31',
        myDatetimeRangeStart: 1628072756566,
        myDatetimeRangeEnd: 1688072756566,
        myMonthRangeStart: '2020-01',
        myMonthRangeEnd: '2020-12',
        myTextarea: 'orange',
        myRadio: 1,
        myCheckbox: [0, 1],
        myCount: 3,
        mySwitch: true,
        mySlider: 56,
        myRate: 5
      },
      items: [{ 
        label: '输入框',
        prop: 'myInput',
        type: 'input' //input、number、password、tel、email、url、search
      }, {
        labels: ['仅行内表单生效', '多个输入框'],
        props: ['myInput1', 'myInput2'],
        type: 'inputs'
      }, { 
        label: '自动补全',
        prop: 'myAutocomplete',
        type: 'autocomplete',
        fetchSuggestions: this.querySearch
      }, {
        label: '下拉框',
        prop: 'mySelect',
        type: 'select',
        options: [
          { label: '选项1', value: 0 },
          { label: '选项2', value: 1 },
          { label: 'optionSlot', value: 2, type: 'slot' }
        ]
      }, {
        label: '级联选择器',
        prop: 'myCascader',
        type: 'cascader',
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则'
          }]
        }]
      }, {
        label: '时间',
        prop: 'myTime',
        type: 'time',
        valueFormat: 'timestamp'
      }, {
        label: '日期',
        prop: 'myDate',
        type: 'date',
        valueFormat: 'yyyy-MM-dd'
      }, {
        label: '多个日期',
        prop: 'myDates',
        type: 'dates',
        valueFormat: 'yyyy-MM-dd'
      }, {
        label: '日期时间',
        prop: 'myDatetime',
        type: 'datetime',
        valueFormat: 'timestamp'
      }, {
        label: '月份',
        prop: 'myMonth',
        type: 'month',
        valueFormat: 'yyyy-MM'
      }, {
        label: '年份',
        prop: 'myYear',
        type: 'year',
        valueFormat: 'yyyy'
      }, {
        label: '日期范围',
        props: ['myDateRangeStart', 'myDateRangeEnd'],
        type: 'daterange',
        valueFormat: 'yyyy-MM-dd'
      }, {
        label: '日期时间范围',
        props: ['myDatetimeRangeStart', 'myDatetimeRangeEnd'],
        type: 'datetimerange',
        valueFormat: 'timestamp'
      }, {
        label: '月份范围',
        props: ['myMonthRangeStart', 'myMonthRangeEnd'],
        type: 'monthrange',
        valueFormat: 'yyyy-MM'
      }, {
        label: '长文本框',
        prop: 'myTextarea',
        type: 'textarea',
        autosize: {
          minRows: 2, maxRows: 6
        }
      }, {
        label: '单选框',
        prop: 'myRadio',
        type: 'radio',
        options: [
          { label: '选项1', value: 0 },
          { label: '选项2', value: 1 }
        ]
      }, {
        label: '多选框',
        prop: 'myCheckbox',
        type: 'checkbox',
        options: [
          { label: '选项1', value: 0 },
          { label: '选项2', value: 1 }
        ]
      }, {
        label: '计数器',
        prop: 'myCount',
        type: 'count'
      }, {
        label: '开关',
        prop: 'mySwitch',
        type: 'switch'
      }, {
        label: '滑块',
        prop: 'mySlider',
        type: 'slider'
      }, {
        label: '评分',
        prop: 'myRate',
        type: 'rate'
      }, {
        label: '颜色',
        prop: 'myColor',
        type: 'color'
      }, {
        label: '自定义内容',
        prop: 'myCustomContent',
        type: 'slot'
      }]
    }
  }
}
复制代码

数据-列宽(非行内表单时生效)

export default {
  data() {
    return {
      items: [{ 
        label: '输入框',
        prop: 'myInput',
        type: 'input',
        width: '50%'
      }]
    }
  }
}
复制代码

数据-隐藏

export default {
  data() {
    return {
      items: [{ 
        label: '输入框',
        prop: 'myInput',
        type: 'input',
        hidden: true
      }]
    }
  }
}
复制代码

数据-继承子项属性(Element Form Item Attributes)

export default {
  data() {
    return {
      items: [{ 
        label: '输入框',
        prop: 'myInput',
        type: 'input',
        minlength: 6,
        placeholder: '请输入...',
        clearable: true,
        prefixIcon: 'el-icon-edit',
        rules: [
          { required: true, message: '请输入...', trigger: 'blur' }
        ]
      }]
    }
  }
}
复制代码

数据-继承子项事件(Element Form Item Events)

export default {
  data() {
    return {
      items: [{ 
        label: '输入框',
        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)
          }
        }
      }]
    }
  }
}
复制代码

数据-分组

<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>
复制代码
export default {
  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: '标题',
          prop: 'title',
          type: 'input',
          width: 'calc(50% - 50px)'
        }, {
          label: '地址',
          prop: 'url',
          type: 'input',
          width: 'calc(50% - 50px)'
        }, {
          prop: 'delButton',
          type: 'slot',
          width: '100px'
        }]
      }]
    }
  }
}
复制代码

按钮

按钮-对象(权重:低)

<template>
  <el-form-model
    label-width="100px"
    :inline="false"
    :data="data"
    :items="items"
    :buttons="buttons"
  />
</template>
复制代码
export default {
  data() {
    return {
      data: {},
      items: [ ... ],
      buttons: [{ 
        text: '提交',
        size: 'small',
        type: 'primary',
        clickMethod: this.onSubmit
      }, {
        text: '重置',
        size: 'small',
        clickMethod: this.onReset
      }]
    }
  },
  methods: {
    onSubmit(button, formRef) {
      formRef.validate((valid) => {
        console.log('validate', valid)
      })
      console.log('onSubmit', button, this.data)
    },
    onReset(button, formRef) {
      this.data = {}
      formRef.resetFields()
      console.log('onReset', button, this.data)
    }
  }
}
复制代码

按钮-插槽(权重:高)

<template>
  <el-form-model
    label-width="100px"
    :inline="false"
    :data="data"
    :items="items"
  >
    <template v-slot:bodyBetween>
      表单与按钮之间区域
    </template>
    <template v-slot:button="{ formRef }">
      <el-button
        type="success"
        size="medium"
      >
        自定义按钮1
      </el-button>
      <el-button
        type="primary"
        size="medium"
        @click="onSubmit(formRef)"
      >
        提交
      </el-button>
      <el-button
        size="medium"
        @click="onReset(formRef)"
      >
        重置
      </el-button>
      <el-button
        type="danger"
        size="medium"
      >
        自定义按钮2
      </el-button>
    </template>
  </el-form-model>
</template>
复制代码
export default {
  data() {
    return {
      data: {},
      items: [ ... ]
    }
  },
  methods: {
    onSubmit(formRef) {
      formRef.validate((valid) => {
        console.log('validate', valid)
      })
      console.log('onSubmit', this.data)
    },
    onReset(formRef) {
      this.data = {}
      formRef.resetFields()
      console.log('onReset', this.data)
    }
  }
}
复制代码
文章分类
前端
文章标签