Custom-form-element NPM

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;
    }

自定义表单

babel-preset-es2015 vue

@infinitebrahmanuniverse/nolb-custom-f @everything-registry/sub-chunk-1428 @zalastax/nolb-custom-f

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago