vue动态表单

最新推荐文章于 2025-06-26 08:50:51 发布

瓜皮前端

最新推荐文章于 2025-06-26 08:50:51 发布

阅读量464

点赞数

CC 4.0 BY-SA版权

分类专栏： vue element UI 文章标签： element UI vue

本文链接：https://blog.csdn.net/u013258556/article/details/102742116

element UI 同时被 2 个专栏收录

2 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

本文介绍了如何使用Vue和Element UI库实现动态表单的功能。通过示例代码展示数据定义及方法处理，帮助开发者理解动态创建和管理表单的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态添加表单功能

话不多说直接上代码

<h4>租赁物信息</h4>
        <div v-for="(item, index) in formData.wBankLeaseItems" :key="item.key" class="zlw clearfix">
          <el-form-item :prop="'wBankLeaseItems.'+ index +'.name'" label="租赁物名称">
            <el-input v-model="item.name" />
          </el-form-item>
          <el-form-item :prop="'wBankLeaseItems.'+ index +'.brandId'" label="租赁物品牌">
            <el-select v-model="item.brandId">
              <el-option v-for="subItem in brands" :key="subItem.id" :label="subItem.name" :value="subItem.id"/>
            </el-select>
          </el-form-item>
          <el-form-item :prop="'wBankLeaseItems.'+ index +'.fixP17'" label="型号">
            <el-input v-model="item.fixP17" />
          </el-form-item>
          <el-form-item :prop="'wBankLeaseItems.'+ index +'.factoryTime'" label="出厂日期">
            <el-date-picker
              v-model="item.factoryTime"
              class="filter-item"
              type="datetime"
              placeholder="选择出厂日期"
              value-format="yyyy-MM-dd HH:mm:ss"/>
          </el-form-item>
          <el-form-item :prop="'wBankLeaseItems.'+ index +'.machineNum'" label="设备序列号">
            <el-input v-model="item.machineNum" />
          </el-form-item>
          <el-form-item :prop="'wBankLeaseItems.'+ index +'.plateNum'" label="GPS序列号">
            <el-input v-model="item.plateNum" />
          </el-form-item>
          <el-form-item label="车牌号">
            <el-input v-model="item.plateCard" />
          </el-form-item>
          <el-form-item :prop="'wBankLeaseItems.'+ index +'.machinePrice'" label="销售单价">
            <el-input v-model="item.machinePrice" >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item :prop="'wBankLeaseItems.'+ index +'.machineAssess'" label="设备估价">
            <el-input v-model="item.machineAssess">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="图片" @click.native="getWBankLeaseItemsIndex(index)">
            <el-upload
              :action="uploadPath"
              :headers="headers"
              :before-upload="beforeUpload"
              :on-success="uploadPicUrl"
              :on-remove="handleRemove"
              multiple
              accept=".jpg, .jpeg, .png, .gif"
              list-type="picture-card"
            >
              <i class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
          <el-form-item label="操作">
            <el-button :disabled="disabled" type="danger" @click="wBankLeaseItemDel(index)">删除当前租赁物</el-button>
          </el-form-item>
        </div>
        <el-button :disabled="disabled" type="primary" class="addZlw" @click="wBankLeaseItem()">新增租赁物信息</el-button>

data里的数据

data(){
    return {
        formData{
            wBankLeaseItems: [{ // 租赁物信息
                name: undefined,
                brandId: undefined,
                factoryTime: undefined,
                plateNum: undefined,
                itemUrl: [],
                machineNum: undefined,
                machinePrice: undefined,
                machineAssess: undefined,
                key: 1
            }],
            wBankLeaseItemsIndex: undefined, // 记录当前上传文件租赁物下标
        }
    }
}

methods:

wBankLeaseItemDel(index) {
   this.formData.wBankLeaseItems.splice(index, 1)
},

wBankLeaseItem() {
      // 添加初始化数据
      this.formData.wBankLeaseItems.push({
        name: undefined,
        brandId: undefined,
        factoryTime: undefined,
        plateNum: undefined,
        itemUrl: [],
        machineNum: undefined,
        machinePrice: undefined,
        machineAssess: undefined,
        key: Date.now()
      })
    },