功能说明

存在一排必填,点击增加后会新增一行,点击每行后面的删除图标则会删除该行,新增按钮只会出现在最后一行

动态表单部分

 <el-form
        :model="dictMaintainForm"
        ref="dictMaintainFormRef"
        :rules="dictMaintainFormRules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <div v-for="(item, index) in dictMaintainForm.dynamicItem" :key="index">
          <el-row>
            <el-col :span="8">
              <el-form-item
                label-width="140px"
                label="选项值:"
                :prop="'dynamicItem.' + index + '.selectOne'"
                :rules="dictMaintainFormRules.selectOne"
              >
                <el-input
                  v-model="item.selectOne"
                  placeholder="请输入选项值名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                :prop="'dynamicItem.' + index + '.selectOneNumber'"
                :rules="dictMaintainFormRules.selectOneNumber"
              >
                <el-input
                  placeholder="请输入选项值编号"
                  v-model="item.selectOneNumber"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="margin-left:50px;">
              <el-button @click="deleteCurrent(index)" type="text"
                >删除</el-button
              >
            </el-col>
          </el-row>
        </div>
      </el-form>

data部分

方法

 点击新增动态向数组中添加一个对象

 效果图835b3f24b007896bc82736ff0489dc8a.png

61426f1b0d2c6e3e83fa9c42e769928d.png 

Logo

前往低代码交流专区

更多推荐