avue-crud 表单新增页自定义信息

实现效果，avue-crud新增按钮的表单弹窗，自定义表单手动添加/删除

image.png

1. html代码

      <avue-crud 
            :option="option"
          :before-open="beforeOpen"
          v-model="form"
            @row-save="rowSave"
            ...其他省略
            >
            <!-- 自定义字段的表单slot -->
            <template slot="customOpenForm">
                <div class="custom-list-container">
                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="el-icon-plus"
                            @click="handleCrudAdd"
                            :disabled="crudType == 'view'"
                            size="small">
                            新增
                        </el-button>
                    </el-form-item>
                    <el-form-item
                        v-for="(item, index) in form.addList"
                        :key="index"
                        :label="`输入框 ${index + 1}`"
                        class="custom-item">
                        
                        <div style="display: flex; align-items: center; gap: 10px;">
                            <el-input
                                v-model="form.addList[index].intValue"
                                placeholder="请输入内容"
                                style="flex: 1;">
                            </el-input>
                            
                            <el-button
                                type="danger"
                                icon="el-icon-delete"
                                size="small"
                                circle
                                @click="handleCrudDel(index)"
                                v-if="form.addList.length > 1 && crudType != 'view'">
                            </el-button>
                        </div>
                    </el-form-item>
                </div>
            </template>
        </avue-crud>

2. js代码

              form: {
                    addList: [
                        {
                            intValue: ''
                        }
                    ]
                },

                    option: {
                      column: [
                        {
                          label: "姓名",
                          prop: "name",
                          rules: [{
                            required: true,
                            message: "请输入账号姓名",
                            trigger: "blur"
                          }]
                        },
                        {
                            label: '自定义',
                            prop: 'customOpen',
                            hide: true, // 隐藏默认的表单控件
                            slot: true, // 开启自定义
                            rules: [{
                                required: true,
                                validator: (rule, value, callback) => {
                                    let values = this.form.addList;
                                    if (!values || values.length === 0) {
                                        callback(new Error('至少需要一个项目'));
                                    } else if (values.some(item => !item.intValue || item.intValue.trim() === '')) {
                                        callback(new Error('所有项目都必须填写'));
                                    } else {
                                        callback();
                                    }
                                },
                                trigger: 'blur'
                            }]
                        }
                        
          ]
        },

3. 方法

            // 增加的方法
            // 新增项目
                handleCrudAdd() {
                  this.form.addList.push({
                    intValue: ''
                  });
                },
                
                // 删除项目
                handleCrudDel(index) {
                  if (this.form.addList.length > 1) {
                    this.form.addList.splice(index, 1);
                  } else {
                    this.$message.warning('至少需要保留一个项目');
                  }
                },
          // beforeOpen方法内增加的内容
            beforeOpen(done, type) {
                this.crudType = type;
                if (type === 'add') {
                    this.form.addList = [
                        {
                            intValue: ''
                        }
                    ]
                }
                done();
                ...其他省略
            },

4. 提交表单格式

 // rowSave方法返回的row，格式为
{
 name: '张三',
 addList: [
     { intValue: 1 },
     { intValue: 2 },
     { intValue: 3 },
  ]
}