custom-form-element
v1.0.7
Published
基于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;
}