zoukankan      html  css  js  c++  java
  • 添加详情

    <template>
      <div>
        <el-form ref="form2" :rules="formRules" :inline="true" :model="form2" label-width="80px">
                <div v-for="(item, index) in form2.dynamicItem" :key="index">
                  <el-form-item
                    label="姓名"
                    :prop="'dynamicItem.' + index + '.name'"
                    :rules="{
                    required: true, message: '姓名不能为空', trigger: 'blur'
                }"
                  >
                    <el-input v-model="item.name"></el-input>
                  </el-form-item>
                  <el-form-item
                    label="手机号"
                    :prop="'dynamicItem.' + index + '.phone'"
                    :rules="[
                     {required: true, message: '手机号不能为空', trigger: 'blur'}
                  ]"
                  >
                    <el-input v-model="item.phone"></el-input>
                  </el-form-item>
                  <el-form-item>
    
                    <el-button v-if="index !== 0" @click="deleteItem(item, index)" type="danger">删除</el-button>
                  </el-form-item>
                </div>
                <el-form-item>
                  <el-button @click="addItem" type="primary">增加</el-button>
    
                </el-form-item>
                <el-form-item class="submit">
                  <el-button type="primary"  @click="sure('form2')" :loading="loading">发  布</el-button>
    
                </el-form-item>
              </el-form>
      </div>
    </template>
    
    <script>
      export default {
      data() {
        return {
           form2: {
                  dynamicItem: [
                    {
                      name: "",
                      phone: ""
                    }
                  ]
                }
        }
      },
      methods:{
         addItem() {
              this.form2.dynamicItem.push({
                name: "",
                phone: ""
              });
            },
            sure(form2) {
            var a = JSON.stringify(this.form2.dynamicItem);
    
              console.log(this.form2.dynamicItem.length, "length");
              console.log(a);
              this.$refs[form2].validate(valid => {
                if (valid) {
                  alert("submit!");
                } else {
                  console.log("error submit!!");
                  return false;
                }
              });
            },
            deleteItem(item, index) {
              this.form2.dynamicItem.splice(index, 1);
              console.log(this.form2.dynamicItem, "删除");
            },
      },
      }
    </script>
    
    <style>
    </style>
    境随心转而悦,心随境转而烦
  • 相关阅读:
    angular ngIf指令 以及组件的输入输出
    angular 命令行指令总结
    angular8.x 事件的处理和样式绑定
    nodejs更新版本(windows)
    angular重要指令 ngFor
    emmet 常用总结
    手机真机调试 (ng项目)
    最长回文子串
    最长连续序列
    重复的子字符串
  • 原文地址:https://www.cnblogs.com/tomingto/p/14841523.html
Copyright © 2011-2022 走看看