关于FormAdjust表单自定义组件使用方法.tmp

一、说明

• 该组件主要由sortablejs和jquery完成
• 主要用于对已经存在的表单元素进行布局、排序、显示/隐藏
• 需要对已经存在的表单进行简单的改造

二、使用流程

1、业务表单改造

• 将表单修改为el-form > el-from-item的格式，即el-form下所有直接子元素为可自定义组件
• el-from下若不是el-form-item的元素，则需增加for="xxx"的唯一标识，相当于el-form-item中的prop属性
• 混入FormAdjustJS，并在页面加载时调用初始化方法initFormAdjust()

2、新增业务表单自定义编辑器

• 创建页面并引入编辑器组件和业务组件

<template>
    <form-adjust ref="formAdjustRef" class="form-adjust-elder">
        <elder-info></elder-info>
    </form-adjust>
</template>

• 页面加载时对业务组件进行调整，确保el-from-item都在业务组件栏中可以正常展示无异常
• 初始化编辑器组件

this.$refs.formAdjustRef.init({
    name, //业务组件名称，自定义唯一
    title, //编辑器显示标题
    data, //元数据，用于编辑器回显
    stageWidth, //画布宽度，根据业务组件实际显示宽度传入即可，如"1000px"，默认100%
    beforeSave: e => { //保存前钩子函数，可用于校验必填项是否全部移入画布
        let required = $('.form-adjust .required')
        if(required.length > 0) {
            this.$message.error('请将必填项拖入画布中')
            return false
        }
        return true
    }
})

//元数据设计
{
    uid, //元素唯一id
    pid, //元素父id
    name, //元素唯一标识，对应el-from-item的prop属性值
    class, //类名
    props: { //属性值，主要用于设置自定义样式
        title,
        width,
        margin,
        padding,
        border,
        ...
    }
}

三、一些思考和问题

• 业务表单自定义后，表格中字段如何显示？会不会将未设置的字段收缩展示更加合理？
• 业务组件中嵌套组件的调整如何设计和交互？
• 新增长者中步骤条如何自定义？