先上一下效果图

其中商品可以一次性添加多个, 起初看到这个需求想的是循环创建多个el-form表单的, 但是写的时候发现如果循环多个表单就会有很多个ref, 表单效验就没法写。
我的解决方案是使用computed, 将一个数组拼成一个表单对象
 

    computed: {
        formData: function() {
            const formData = {};
            this.formDataArr.map((item, index) => {
                formData[index] = item
            })
            return formData
        }
    },
    data() {
        return {
            curIndex: null, // 当前操作项索引
            isImportStart: false, // 图片上传状态
            formDataArr: [] // 表单数组
        }
    },

然后在el-form绑定的时候绑定formData来使用，这样他能监听到formDataArr的变化，从而实现商品的添加
 

这样绑定之后循环中的index就相当于formData的key, 其中有个需要注意的地方，因为是新增并且还附带删除功能所以for循环的key是不能用索引值的,我是以时间戳为key
 

        /**
         * 添加新商品模板
         */
        addNewMode() {
            this.formDataArr.push({
                key: this.$dayjs().unix(), // 秒级时间戳
                goodsName: '',
                goodsPhoto: '',
                goodsPrice: '',
                status: 1
            })
        },

         /**
         * 删除当前商品模板
         */
        removeItemMode(index) {
            this.formDataArr = this.formDataArr.filter((item, idx) => idx !== index);
        },

再一个比较大的坑就是写表单效验规则的时候，先附上添加表单效验的几种方式，并且他的第三种方法，也可以实现我的这个需求
 

###  详解element-ui中表单验证的三种方式
不过要注意的是因为我的写法与他的不同， 所以form-item中prop的书写方式还是很不同的, 附上我的写法
 

<el-form-item label="添加图片" :prop="`[${index}].goodsPhoto`" :rules="[{required: true, message: '请添加商品图片', trigger: 'blur'}]">