custom-form1.0 v1.0.0

custom-form

vue2-elementui-form表单组件二次封装

使用需要搭配elementui框架

属性说明

使用示例

  // 独行表单模式
	 <formCustom
        :data="baseHeaders"
        :bindProps="{ 'label-width': '124px', 'scroll-to-error': true }"
        :ruleForm.sync="baseInfoForm"
        :formRef.sync="baseInfoFormRef"
      >
  </formCustom>

  // 行内表单模式
	 <formCustom
        :data="searchHeaders"
        :bindProps="{inline: true }"
        :ruleForm.sync="searchRuleForm"
        :formRef.sync="baseInfoFormRef"
      >
  </formCustom>

import formCustom from "@/components/custom-form/formCustom.vue";
export default {
  components: {
    formCustom
  },
  data() {
    const formProps = {
      style: {
        marginBottom: "0",
        marginRight: "16px",
      }
    }
    return {
      baseInfoForm: {
        name: "",
        discount_type: 1, 
        get_time:[], 
      },
      baseInfoFormRef: {},
      baseHeaders: [
        {
          label: "名称",
          prop: "name",
          Component: "ElInput",
          defaultValue: "",
          componentProps: {
            placeholder: "请输入名称",
            style: {
              width: "240px",
            },
            maxLength: 15,
          },
          formProps: {
            rules: {
              required: true,
              trigger: "blur",

              validator: (rule, value, callback) => {
                if (value === "") {
                  callback(new Error("请输入名称"));
                }
                const len = strLength(value);
                if (len < 3) {
                  callback(new Error("名称需3个字符以上"));
                }
                callback();
              },
            },
          },
          afterSlot: () => (
            <span style="font-size:12px;margin-left:8px;color:#36a4d0;">
              示例？
            </span>
          ),
          beforeSlot: () => (
            <span style="font-size:12px;margin-left:8px;color:#36a4d0;">
              示例？
            </span>
          ),
        },
        {
          label: "使用门槛",
          prop: "discount_type",
          render: (row) => {
            return (
              <cusRadio
                styleType="flex"
                v-model={this.baseInfoForm.discount_type}
                data={[
                  {
                    id: 1,
                    type: "none",
                    title: "无门槛",
                  },
                  {
                    id: 2,
                    type: "input",
                    beforeName: "满",
                    afterName: "元使用",
                    placeholder: "1-9999",
                  },
                ]}
                useValue={this.baseInfoForm.min_pay_amount}
                onChangeValue={(e) => {
                  this.changeType(e, "use_value");
                }}
              ></cusRadio>
            );
          },
          formProps: {
            rules: {
              required: true,
              trigger: "blur",
            },
          },
        },
        {
          label: "使用时间",
          prop: "get_time",
          Component: "ElDatePicker",
          defaultValue: "",
          componentProps: {
            type: "datetimerange",
            "range-separator": "-",
            "start-placeholder": "开始日期",
            "end-placeholder": "结束日期",
            style: {
              width: "360px",
            },
            format: "yyyy-MM-dd HH:mm:ss",
            "value-format": "yyyy-MM-dd HH:mm:ss",
          },
          formProps: {
            rules: {
              required: true,
              message:'请选择时间'
            },
          },
        },
      ],
      searchHeaders:[
        {
          formProps,
					Component: 'el-button',
          componentProps: {
            type: "primary"
          },
          renderHTML: () => {
            return '+添加'
          },
          on: {
            click: this.addMaterial
          },
					afterslot: ()=>  {
						return <span style="font-size:12px;margin-left:8px;color:#36a4d0;">
              示例？
            </span>
					}
				},
        {
          formProps: {
            style: {
              flex: 1,
              "margin-bottom": 0,
            },
          },
        },
        {
          formProps,
					defaultValue: '',
					label: '状态',
          Component: 'el-select',
					prop: 'status',
          componentProps: {
            placeholder: '请选择'
          },
					on: {
						change: (value) => {
							this.$nextTick(() => { // 查询表格配合table使用
								this.$refs.useTable.getRequestRes('firstPage')
							})
						}
					},
          childSlot: statusList.map(item => {
						return {
							Component: 'el-option',
							componentProps: {
								label: item.label,
								value: item.value,
								key: item.value
							}
						}
					})
				}
      ]
    }
  },
}

效果图

暂无