Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

custom-form-element

xinliu14MIT1.0.7

基于element-ui的form表单组件

自定义表单

readme

custom-form-element

基于 element-ui 的 form 表单组件

安装

npm install custom-form-element

插件引入

import CustomForm from "custom-form-element";
Vue.use(CustomForm);

参数说明

名称 类型 默认值 是否必填 备注
autoFormData Array [] 是 表单的数据内容
inline Boolean false 否 表单排列方式，false 纵向排列，true 横向排列
formWidth String,Number 800 否 表单宽度
changeCommit Boolean false 否 是否表单内容改变就提交数据
showSubmitButton Boolean true 否 是否显示提交按钮
submitButtonText String 提交 否 提交按钮的文案

使用示例

<CustomForm
  @getFormData="getFormData"
  :autoFormData="formData"
  :inline="inline"
  :formWidth="formWidth"
  :changeCommit="changeCommit"
  :showSubmitButton="showSubmitButton"
  :submitButtonText="submitButtonText"
>
</CustomForm>

autoFormData 数据项

名称 类型 默认值 是否必填 备注
title String "" 否 当前分组名称
code String "" 否 当前分组 code
parentId String 0 否 当前分组 parentId
formData Array 0 是 当前分组的表单数据项

autoFormData.formData 数据项

名称 类型 默认值 是否必填 备注
code String "" 是 当前表单项传值的唯一标识
type String "" 是 当前表单项的类型
inputType String "" 否 当 type=="input"时,必填
placeholder String "" 否 当前表单项的占位符
title String "" 是 当前表单项的名称
maxlength Number null 否 输入框的长度限制
defaultValue String "" 否 当前表单项的默认值，同 element-ui 项
rules Array [] 否 当前表单项的校验规则，同 element-ui 项
selectOptions Array [] 否 表单项的选择项内容(id,value,label ) type 为 select,checkbox,radio 时,必填
valueFormat String "" 否 type 为选择时间的类型时，选择结果的格式，同 element-ui
seprator String "至" 否 时间段选择控件，中间字的文案，同 element-ui
startPlaceholder String "" 否 时间段选择控件，开始时间的占位符，同 element-ui
endPlaceholder String "" 否 时间段选择控件，结束时间的占位符，同 element-ui
format String "" 否 type 为选择时间的类型时，选择结果展示的格式，同 element-ui
remarkText String "" 否 当前表单项的备注信息
customContent Boolean false 否 自定义插槽
multiple Boolean false 否 type 为 select 时，是否多选
tooltipText String "" 否 表单释义

formData.type

名称 备注
input input 类型的输入框
textarea 多行输入框
select 下拉框
checkbox 复选框
radio 单选框
switch 开关
datepicker 日期选择框
daterangepicker 日期范围选择框
weekpicker 周选择框
monthpicker 月选择框
monthrangepicker 月份范围
yearpicker 年选择框
timepicker 时间选择器
timerangepicker 时间段选择器
datetimepicker 日期时间选择器
datetimerangepicker 日期时间段选择器

formData.inputType

当 formData.type == input 时,区别 input 类型表单的具体分类

名称 备注
text 文本输入框
password 密码输入框
number 数字输入框

使用示例

data() {
    return {
      inline: false,
      formClass: "offInlineForm",
      formData: [
        {
          code: "inputText",
          type: "input",
          inputType: "text",
          placeholder: "请输入",
          title: "单行输入框",
          maxlength: 16,
          defaultValue: "123"
        },
        {
          code: "inputPassword",
          type: "input",
          inputType: "password",
          placeholder: "请输入",
          title: "密码输入框",
          maxlength: 30,
          defaultValue: "123"
        },
        {
          code: "textarea",
          type: "textarea",
          inputType: "",
          placeholder: "请输入",
          title: "多行输入框",
          maxlength: 300,
          defaultValue: "123"
        },
        {
          code: "inputNumber",
          type: "input",
          inputType: "number",
          placeholder: "请输入数字",
          title: "数字输入框",
          defaultValue: 123,
          rules: [
            {
              required: true,
              message: "不能为空"
            }
          ]
        },
        {
          code: "select",
          type: "select",
          placeholder: "请选择",
          title: "下拉选择框",
          selectOptions: [
            {
              id: 1,
              label: "北京2",
              value: 1
            },
            {
              id: 2,
              label: "上海2",
              value: 2
            }
          ],
          defaultValue: 1
        },
        {
          code: "checkbox",
          type: "checkbox",
          placeholder: "请选择",
          title: "checkbox复选框",
          selectOptions: [
            {
              id: 3,
              label: "北京2",
              value: 3
            },
            {
              id: 4,
              label: "上海2",
              value: 4
            }
          ],
          defaultValue: [3, 4]
        },
        {
          code: "radio",
          type: "radio",
          title: "radio单选",
          selectOptions: [
            {
              id: 5,
              label: "北京2",
              value: 5
            },
            {
              id: 6,
              label: "上海2",
              value: 6
            }
          ],
          defaultValue: 5
        },
        {
          code: "switch",
          type: "switch",
          title: "开关",
          defaultValue: true
        },
        {
          title: "日期选择框",
          code: "datepicker",
          type: "datepicker",
          placeholder: "请选择日期",
          // valueFormat: "yyyy年MM月dd日",
          defaultValue: new Date().getTime() // 格式跟valueFormat保持一致
        },
        {
          title: "选择日期范围",
          code: "daterangepicker",
          type: "daterangepicker",
          seprator: "到",
          startPlaceholder: "请选择开始日期",
          endPlaceholder: "请选择结束日期",
          format: "yyyy年MM月dd日",
          valueFormat: "yyyy-MM-dd",
          defaultValue: ["2022-01-12", "2022-03-12"]
          // pickerOptions: timeToToday
        },
        {
          title: "周选择框",
          code: "weekpicker",
          type: "weekpicker",
          placeholder: "请选择周",
          format: "yyyy 第 WW 周",
          valueFormat: "yyyy年MM月dd日", // 不能是第几周的数字
          defaultValue: "2022年03月21日" // 格式必须是周一的一天，不能是数字
          // pickerOptions: timeToToday
        },
        {
          title: "月选择框",
          code: "monthpicker",
          type: "monthpicker",
          placeholder: "请选择月",
          format: "yyyy年MM月",
          valueFormat: "yyyy-MM",
          // valueFormat: "timestamp",
          defaultValue: "2022-02" // 格式跟valueFormat 保持一致
          // pickerOptions: timeToToday
        },
        {
          title: "选择月份范围",
          code: "monthrangepicker",
          type: "monthrangepicker",
          seprator: "到",
          startPlaceholder: "请选择开始月份",
          endPlaceholder: "请选择结束月份",
          format: "yyyy年MM月",
          valueFormat: "yyyy年MM月",
          defaultValue: ["2022年01月", "2022年03月"]
          // pickerOptions: timeToToday
        },
        {
          title: "年选择框",
          code: "yearpicker",
          type: "yearpicker",
          placeholder: "请选择年",
          format: "yyyy年",
          valueFormat: "yyyy年",
          defaultValue: "2022年"
          // pickerOptions: timeToToday
        },

        {
          title: "时间选择器",
          code: "timepicker",
          type: "timepicker",
          placeholder: "请选择时间",
          defaultValue: "12:12:12"
          // pickerOptions: timeToNow
        },
        {
          title: "时间段选择器",
          code: "timerangepicker",
          type: "timerangepicker",
          seprator: "到",
          startPlaceholder: "请选择开始时间",
          endPlaceholder: "请选择结束时间",
          valueFormat: "HH:mm:ss",
          defaultValue: ["11:11:11", "12:12:12"]
          // pickerOptions: timeToNow
        },
        {
          title: "日期时间选择器",
          code: "datetimepicker",
          type: "datetimepicker",
          placeholder: "选择日期时间",
          valueFormat: "yyyy年MM月dd日 HH:mm:ss",
          defaultValue: "2022-01-01 12:12:12"
          // pickerOptions: timeToToday
        },
        {
          title: "日期时间段选择器",
          code: "datetimerangepicker",
          type: "datetimerangepicker",
          separator: "到",
          startPlaceholder: "请选择开始时间",
          endPlaceholder: "请选择结束时间",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
          // pickerOptions: timeToToday,
          rules: [
            {
              required: true,
              message: "时间段不能为空"
            }
          ],
          defaultValue: ["2022-01-01 00:00:01", "2022-03-01 23:59:59"] // 格式跟valueFormat 保持一致
        }
      ],
    };
  },

自定义插槽的使用示例

data(){
  return{
    formData:[{
      title: "自定义插槽",
      code: "customContent",
      type: "customContent",
      customContent: true,
    }]
  }
}
<CustomForm
  @getFormData="getFormData"
  :autoFormData="formData.data"
  :inline="inline"
  :formWidth="formWidth"
  :title="formData.title"
  :changeCommit="changeCommit"
  :showSubmitButton="showSubmitButton"
  :submitButtonText="submitButtonText"
>
  <template v-slot:customContent>
    <!-- 插槽名称为code名称 -->
    <div>
      <el-tabs>
        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth"
          >定时任务补偿</el-tab-pane
        >
      </el-tabs>
    </div>
  </template>
</CustomForm>

事件

名称 回调参数 说明
getFormData formData 获取表单提交的数据结果

事件使用示例

getFormData(formData) {
      // console.log(formData);
      this.formDataList = formData;
    }