• 动态增加表单vue element ui


    1、页面部分

                      <div v-for="(item, index) in editForm.dynamicItem" :key="index">
                         <el-row  class="iputrowclass">
                            <el-col :span="10">
                                  <el-form-item
                                      label="key"
                                      :rules="{
                                          required: true, message: 'key不能为空', trigger: 'blur'
                                      }"
                                  >
                                    <el-input v-model="item.name" size="mini"></el-input>
                              </el-form-item>
                            </el-col>
                           <el-col :span="10">
                              <el-form-item
                              class="inputvalue"
                                  label="value"
                                  :rules="[
                                      {required: true, message: 'value不能为空', trigger: 'blur'},
                                    ]"
                                  >
                                  <el-input v-model="item.value"  size="mini" ></el-input>
                              </el-form-item>
                              </el-col>
                              <el-col :span="2">
                                   <el-form-item>
                                <div class="inputicon">
                                         <i class="el-icon-delete" @click="deleteItem(item, index)"></i>
                                </div>
                                  </el-form-item>
                              </el-col>
                      </el-row>
                  </div>
    2、js部分数据部分
    export default {
      data() {
        return {
            dynamicItem: []
    }
    3、js部分方法部分
    addItem () {
          this.editForm.dynamicItem.push({
            name: '',
            value: ''
          })
        },
        deleteItem (item, index) {
          console.log("index===="+index)
          this.editForm.dynamicItem.splice(index, 1)
        }
     
  • 相关阅读:
    [Windows]wmic查看运行进程的参数
    Java8中的foreach跳出循环break/return
    Python Learning(6)字典
    SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(三): 整合阿里云 OSS 服务 -- 上传、下载文件、图片
    SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(四): 整合阿里云 短信服务、整合 JWT 单点登录
    SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(五): 数据表设计、使用 jwt、redis、sms 工具类完善注册登录逻辑
    Servlet、Jsp
    BIO、NIO、AIO
    HashMap (JDK1.8) 分析
    mysql常见笔试题
  • 原文地址:https://www.cnblogs.com/jimmy2019/p/13750483.html
Copyright © 2020-2023  润新知