一、渲染函数核心优势

二、表单生成器实现

1. 表单元素配置系统

// 表单元素元数据配置
const formElements = {
    input: {
        label: '单行文本',
        icon: 'icon-input',
        render(h, config) {
            return h('el-input', {
                props: {
                    placeholder: config.placeholder || '请输入',
                    value: config.value
                },
                on: {
                    input: val => config.value = val
                }
            })
        }
    },
    select: {
        label: '下拉选择',
        icon: 'icon-select',
        render(h, config) {
            return h('el-select', {
                props: {
                    options: config.options || [],
                    value: config.value
                },
                on: {
                    change: val => config.value = val
                }
            })
        }
    }
}

2. 动态渲染核心逻辑

export default {
    render(h) {
        return h('div', { class: 'form-container' }, [
            this.formConfig.map(item => {
                const element = formElements[item.type]
                if (!element) return null
                
                return h('div', { class: 'form-item' }, [
                    h('label', item.label),
                    element.render(h, item.config),
                    this.renderValidation(h, item)
                ])
            })
        ])
    },
    
    methods: {
        renderValidation(h, item) {
            if (!item.rules) return null
            return h('div', { class: 'error-message' }, 
                this.validateField(item)
            )
        }
    }
}

3. 可视化设计器实现

<template>
  <div class="designer">
    <!-- 组件面板 -->
    <div class="component-palette">
      <div 
        v-for="(comp, type) in formElements"
        :key="type"
        @dragstart="dragStart(type)"
        draggable
      >
        <i :class="comp.icon"></i>
        {{ comp.label }}
      </div>
    </div>
    
    <!-- 设计画布 -->
    <div 
      class="design-canvas"
      @drop="handleDrop"
      @dragover.prevent
    >
      <dynamic-form 
        :formConfig="formConfig"
        ref="form"
      />
    </div>
  </div>
</template>

<script>
export default {
    methods: {
        handleDrop(e) {
            const type = e.dataTransfer.getData('type')
            this.addComponent(type)
        },
        
        addComponent(type) {
            this.formConfig.push({
                type,
                label: `${formElements[type].label} ${this.formConfig.length + 1}`,
                config: JSON.parse(JSON.stringify(
                    formElements[type].defaultConfig || {}
                ))
            })
        }
    }
}
</script>

三、高级功能扩展

1. 条件渲染逻辑

renderConditional(h, item) {
    if (!item.conditions) return null
    
    const shouldShow = item.conditions.every(cond => {
        const target = this.formConfig.find(i => i.id === cond.id)
        return target.config.value === cond.value
    })
    
    return shouldShow ? this.renderElement(h, item) : null
}

2. 表单验证系统

validateForm() {
    return this.formConfig.every(item => {
        if (item.rules) {
            const valid = item.rules.every(rule => {
                return rule.validate(item.config.value)
            })
            item.isValid = valid
            return valid
        }
        return true
    })
}

四、实际应用场景

• 问卷调查系统：动态生成问卷表单
• CRM系统：自定义客户字段
• OA审批：可视化流程表单设计
• 数据采集：快速搭建采集页面