element 表单验证批量添加的 demo

最新推荐文章于 2024-10-28 17:09:17 发布

原创

最新推荐文章于 2024-10-28 17:09:17 发布 · 430 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

本文介绍了一个基于Vue的表单组件，用于管理方案列表，包括方案名称输入、考核类型选择、区间设置和计费规则调整。通过循环展示和删除功能，展示了如何在编辑状态下灵活操作方案配置。

效果

在这里插入图片描述

主要是这个标签<el-form-item :rules="rules.programName" :prop="'programList.' + index + '.programName'" label="方案名称">

需要循环的部分

<el-row v-for="(second,index) in form.programList" :key="index" class="programme">
        <el-row>
          <el-form-item :rules="rules.programName" :prop="'programList.' + index + '.programName'" label="方案名称">
            <el-input v-model.trim="second.programName" :disabled="detail.editState === 0" class="w220" placeholder="请输入" maxlength="20"></el-input>
          </el-form-item>
          <el-form-item :rules="rules.typeId" :prop="'programList.' + index + '.typeId'" label="考核类型">
            <el-select v-model="second.typeId" :disabled="detail.editState === 0" placeholder="请选择" clearable filterable class="w