ele-plus-form

介绍

Ele Plus Form是一个基于Element Plus UI库的扩展，用于简化Vue.js应用程序中的表单开发。它提供了一组自定义的表单组件和一些实用的功能，可以帮助您更轻松地构建和管理表单。 Ele Plus Form的特点和功能包括：

1. 自定义表单组件：Ele Plus Form提供了一系列的自定义表单组件，如Input、Select、DatePicker、Upload等，这些组件扩展了Element Plus原有的表单组件，增加了一些便捷的功能和选项。
2. 表单验证：Ele Plus Form内置了表单验证的功能，可以通过简单的配置进行表单字段的校验，包括必填字段、数据类型、最小/最大长度、正则表达式等。
3. 表单布局：Ele Plus Form提供了多种表单布局选项，可以根据需要选择水平布局或垂直布局，以及自定义字段的排列方式和样式。
4. 表单数据处理：Ele Plus Form提供了方便的表单数据处理方法，可以对表单数据进行格式化、转换和校验，使得数据的处理更加简单和灵活。
5. 表单事件处理：Ele Plus Form允许您监听表单的各种事件，如提交表单、重置表单等，以及自定义事件的处理逻辑。

代码预览

<template>
  <ele-form ref="eleFormRef" v-model="form" :form-data="formData" />
  <el-button type="primary" @click='submit'>提交</el-button>
</template>

<script setup>
  import { reactive } from 'vue'
  import { defineValue } from 'ele-plus-form'
  
  // 表单配置项
  const formData = reactive({
    studentName: {
      type: 'input', label: '学生姓名', span: 12
    },
    studentNo: {
      type: 'input', label: '身份证号', span: 12
    },
    sex: {
      type: 'radio', label: '性别', option: { 1: '男', 2: '女' }
      // 将 radio 改成 select 即可将单选框变成下拉框
      // type: 'select'
    }
  })
  
  // form表单数据
  const form = defineValue(formData)

  const eleFormRef = ref()
  const submit = () => {
    eleFormRef.value.validate(() => {
      // 校验成功，提交表单
    })
  }
</script>

一、ElePlusForm

Attributes

Events

表单验证相关

组合式 API

useDefaultValue(formData: object, defaultForm?: object)

调用 useDefaultValue 方法，接受两个参数： 参数一：当前表单formData(必传)； 参数二：默认的modelValue参数（选传）； 返回值：根据formData通过Vue3的reactive方法自动生成表单项的默认值。

<script setup>
  import { useDefaultValue } from 'ele-plus-form'
	const formData = ...
  
  const form = useDefaultValue(formData, {
  	sex: 1,
    name: '张三'
  })
</script>

二、FormData Attributes

采用键值对形式，其中key为表单项字段，value则为该表单配置项，以下简称attrs

attrs 通用参数

attrs.type 类型

三、输入框类

Attributes

button属性 (0.4.0+)

Function (0.3.55+新增第二个参数form)

基础示例

const formData = {
  name: {
    type: 'input',
    label: '姓名',
    rule: '中文',
    onChange: (e) => {
      console.log(e)
    }
  }
}

四、带选项类

Attributes

option

Function

基础示例

// 数组或动态数组形式选项
const state = reactive({
  option: [
    { label: '足球', value: 1 },
    { label: '篮球', value: 3 }
  ]
})

const formData = {
  value1: {
    type: 'radio',
    label: '性别',
    option: { 1: '男', 2: '女' }, // 对象形式选项
    onChange: (e, item) => {
      console.log(e, item)
    }
  },
  value2: {
    type: 'radioButton',
    label: '性别',
    option: { 1: '男', 2: '女' }, // 对象形式选项
    onChange: (e, item) => {
      console.log(e, item)
    }
  },
  value4: {
    type: 'select',
    label: '爱好',
    option: () => state.option, // 数组或动态数组形式选项
    onChange: (e, item) => {
      console.log(e, item)
    }
  },
  value5: {
    type: 'transfer',
    label: '爱好',
    option: () => state.option, // 数组或动态数组形式选项
    onChange: (e, item) => {
      console.log(e, item)
    }
  },
  value6: {
    type: 'select',
    label: '爱好',
    option: () => state.option, // 数组或动态数组形式选项
    virtual: true, // 开启虚拟列表
    extraKey: 'className', // 额外展示的字段
    onChange: (e, item) => {
      console.log(e, item)
    }
  }
}

五、开关类

Attributes

Function

基础示例

const formData = {
  isOpen: {
    type: 'switch',
    label: '是否启用',
    activeValue: 1,
    inactiveValue: 0,
    onChange: () => {}
  }
}

六、日期选择器类

Attributes

Function

基础示例

const formData = {
  date: {
    type: 'datetime',
    label: '活动开始时间',
    onChange: (e) => {
      console.log(e)
    }
  }
}

七、时间选择器类

Attributes

Function

基础示例

const formData = {
  date: {
    type: 'time',
    label: '放学时间',
    onChange: (e) => {
      console.log(e)
    }
  }
}

八、上传文件 (0.2.8+)

全局配置上传接口

在引入Ele Plus Form的时候，需传入uploadApi方法，uploadApi的返回值必须为Promise，即：uploadApi: (file, attrbuites) => Promise， 调用该Promise后，期望返回的数据为文件链接：

import ElePlusForm from 'ele-plus-form'
import 'ele-plus-form/dist/style.css'

app.use(ElePlusForm, {
  uploadMaxSize: xxx, // 最大文件大小，单位M
  uploadApi: (file, attrbuites) => {
    // 文件对象
    const fileData = new FormData()
    fileData.append('file', file)
    // 上传时附带的额外参数
    for (const key in attrbuites) {
      fileData.append(key, attrbuites[key])
    }
    
    // 上传接口
    uploadApi(fileData).then(({data}) => {
      // data 即为文件链接
    })
  }
})

Attributes

Function

基础示例

const formData = {
  date: {
    type: 'upload',
    label: '上传图片',
    onChange: (fileList) => {
      console.log(fileList)
    }
  }
}

九、动态表单

Attributes

Function

基础示例

const formData = {
  list: {
    type: 'dynamicForm',
    label: '配置选项',
    min: 1,
    max: 4,
    itemSpan: 12,
    defaultValue: {
      label: '',
      value: ''
    },
    formData: {
      label: {
        type: 'input',
        label: '选项名称',
        span: 12
      },
      value: {
        type: 'input',
        label: '选项值',
        span: 12
      }
    }
  }
}

// 选项模式 option和optionField
const formData = {
  list: {
    type: 'dynamicForm',
    label: '配置选项',
    option: [
      { value: 1, label: '苹果', name: 'Apple' },
      { value: 2, label: '香蕉', name: 'Banan' },
      { value: 3, label: '火龙果', name: 'Huolong' }
    ],
    optionField: 'fruitKey',
    max: 2,
    itemSpan: 12,
    defaultValue: {
      label: '',
      value: ''
    },
    formData: {
      label: {
        type: 'input',
        label: '选项名称',
        span: 12
      },
      value: {
        type: 'input',
        label: '选项值',
        span: 12
      }
    }
  }
}

十、简单表格(0.4.73+)

Attributes

Function

基础示例

const formData = {
  table: {
    type: 'table',
    label: '学生信息',
    option: [
      { name: '李四', value: '1', school: '成都一中', isFirst: true, rowspan: 2 },
      { name: '王五', value: '2', school: '成都一中', isFirst: false, rowspan: 2 },
      { name: '赵二', value: '3', school: '成都二中', isFirst: true, rowspan: 1 }
    ],
    max: 2,
    // 表格数据字段
    fields: {
      school: '学校',
      name: '姓名'
    },
    // 开启多选
    selectable: true,
    // 合并单元格
    spanMethod: ({ row, column }) => {
      if (column.label == '学校') {
        const { isFirst, rowspan } = row
        if (isFirst) {
          return { rowspan, colspan: 1 }
        } else {
          return { rowspan: 0, colspan: 0 }
        }
      }
    }
  }
}

十一、富文本

Attributes

Function

基础示例

const formData = {
  content: {
    type: 'editor',
    label: '内容'
  }
}

十二、插槽slot

Attributes

基础示例

<ele-plus-form ref="eleFormRef" v-model="state.form" :form-data="formData">
  <template #list>
    列表内容
  </template>
</ele-plus-form>

const formData = {
  list: {
    type: 'slot',
    label: '列表'
  }
}

十三、html

Attributes

基础示例

const formData = {
  content: {
    type: 'html',
    label: 'HTML内容'
  }
}