Vue element-ui实现动态表单项以及动态校验规则

Vue + element-ui 实现动态表单项以及动态校验规则

情境

项目需要实现一个功能，表单中某个表单项产品 id 支持动态新增多个产品 id 表单项，每个产品 id 表单项都需要有校验规则，校验失败时各自有对应的校验提示

重点分析

1. 表单对象内字段并非固定，需要根据交互动态新增
2. 表单校验规则并非固定，需要根据字段新增动态新增对应校验规则
3. 接口提交时并非提交多个产品 id 字段，需要将多个产品 id 文本字段整合为一个产品 id 数组字段

实现

核心：表单增加动态多个产品 id 字段以及产品 id 数组字段，产品 id 字段前缀相同，通过后缀序号区分不同字段，实际提交时整合字段为数组字段

1. 模板语法

产品 id 数组字段的长度与产品 id 字段的个数始终保持一致

el-form
    :model="addForm"
    label-suffix=":"
    label-width="120px"
    :rules="rules"
    ref="form"
>
    el-col :span="12" v-for="(item, index) in addForm.superModelSkuIdList" :key="index">
        el-form-item :label="formatSkuId(index)" :prop="'skuId'+ index">
            div class="skuId-item">
                el-input
                    v-model.trim="addForm['skuId'+ index]"
                    placeholder=" 请输入产品 id"
                    maxlength="50"
                    style="display: inline-block;"
                >
                el-input>
                i
                    style="display: inline-block;"
                    class="el-icon-circle-plus-outline icon"
                    @click="handleAddId"/>
            div>
        el-form-item>
    el-col>
el-form>

2. 核心逻辑

export default {
    data() {
        return {
            addForm: {
                
                superModelSkuIdList: [''],
            },
        }
    },
    computed: {
        
        rules() {
            const checkSkuId = (rule, value, callback) => {
                
            }
            let staticRules = {
                
            }
            let skuIdRules = {}
            let rule = [
                {
                    validator: checkSkuId,
                    trigger: 'blur',
                },
            ]
            
            this.addForm.superModelSkuIdList.forEach((item, index) => {
                skuIdRules['skuId' + index] = rule
            })
            return Object.assign(staticRules, skuIdRules)
        }
    },
    methods: {
        
        handleAddId() {
            this.addForm.superModelSkuIdList.push('')
            this.$set(this.addForm, 'skuId' + (this.addForm.superModelSkuIdList.length - 1), '')
        },
        
        createSkuIds() {
            
            this.addForm.superModelSkuIdList.forEach((item, index) => {
                this.$set(this.addForm, 'skuId' + index, item)
            })
        },
        
        openAddDialog(title, row = {}) {
            
            this.addForm.superModelSkuIdList = [...row.superModelSkuIdList] || ['']
            this.createSkuIds()
        },
        
        clearEmptySkuId() {
            let list = []
            this.addForm.superModelSkuIdList.forEach((item, index) => {
                if(this.addForm['skuId' + index]) list.push(this.addForm['skuId' + index])
                delete this.addForm['skuId' + index]
            })
            this.addForm.superModelSkuIdList = list
            this.createSkuIds()
        },
        
        deleteSkuIds(skuInfo) {
            this.addForm.superModelSkuIdList.forEach((item, index) => {
                delete skuInfo['skuId' + index]
            })
            return skuInfo
        },
        
        submitForm() {
            this.$refs.form.validate((val) => {
                if (val) {
                    this.clearEmptySkuId()
                    let param = {
                        skuInfo: this.deleteSkuIds({...this.addForm}),
                        
                    }
                    
                }
            })
        },
        
        resetForm() {
            this.addForm = {
                
                superModelSkuIdList: [''],
            }
        },
    }
}