精华内容
下载资源
问答
  • 存在一排必填,点击增加后会新增一行,点击每行后面的删除图标则会删除该行,新增按钮只会出现在最后一行 1.动态表单部分 2.data部分 3.方法 <el-form ref="form" :rules="formRules" :inline="true" :model=...

    存在一排必填,点击增加后会新增一行,点击每行后面的删除图标则会删除该行,新增按钮只会出现在最后一行
    1.动态表单部分
    在这里插入图片描述2.data部分
    在这里插入图片描述
    3.方法
    在这里插入图片描述

    在这里插入图片描述

     <el-form ref="form" :rules="formRules" :inline="true" :model="form" label-width="80px">
            <div v-for="(item, index) in form.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'},
                  { pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
              ]"
              >
                <el-input v-model="item.phone"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button v-if="index+1 == form.dynamicItem.length" @click="addItem" type="primary">增加</el-button>
                <el-button v-if="index !== 0" @click="deleteItem(item, index)" type="danger">删除</el-button>
              </el-form-item>
            </div>
          </el-form>
    
     form: {
            dynamicItem: [
              {
                name: "",
                phone: ""
              }
            ]
          },
    
     addItem() {
          this.form.dynamicItem.push({
            name: "",
            phone: ""
          });
        },
        sure(form) {
          console.log(this.form.dynamicItem.length, "length");
          this.$refs[form].validate(valid => {
            if (valid) {
              alert("submit!");
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        },
        deleteItem(item, index) {
          this.form.dynamicItem.splice(index, 1);
          console.log(this.form.dynamicItem, "删除");
        },
    
    展开全文
  • Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
  • 效果图 ...在点击添加一行的时候,执行numCheck()方法; 在点击删除一行的时候,执行numCheck()方法; numCheck()方法; function numCheck(){ var num = $("#inputs .row").length; /...

    效果图

     

    (右侧加减不影响左侧序号)

     

    添加存放序号的span标签

     

    在点击添加一行的时候,执行numCheck()方法;

    在点击删除一行的时候,执行numCheck()方法;

     

    numCheck()方法;

     


    function numCheck(){
            var num = $("#inputs .row").length;     //获取行数
            for (var i = 0; i <= num; i++) {         //进行循环
            $("#inputs .row .line_num").eq(i).html(i+1+"、");
        };
    }

    转载于:https://www.cnblogs.com/required/p/10734876.html

    展开全文
  • https://www.cnblogs.com/loveliang/p/14291488.html

    https://www.cnblogs.com/loveliang/p/14291488.html

    展开全文
  • vue中form表单点击一次添加一行和删除一行 1、效果图 2、代码 <template> <div class="container"> <el-row v-for="(item, index) in ruleForms.items"> <!-- :rules="rules" --> <...

    vue中form表单点击一次添加一行和删除一行

    1、效果图

    在这里插入图片描述

    2、代码

    <template>
      <div class="container">
        <el-row v-for="(item, index) in ruleForms.items">
          <!--   :rules="rules" -->
          <el-form
            :inline="true"
            :model="ruleForms.items[index]"
            ref="ruleForms"
            label-width="100px"
            class="demo-form-inline"
            size="small"
          >
            <el-form-item label="使用时间" prop="date">
              <el-date-picker
                v-model="ruleForms.items[index].date"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format=" yyyy-MM-dd HH:mm"
                format="yyyy-MM-dd HH:mm"
                :default-time="['00:00:00']"
              ></el-date-picker>
            </el-form-item>
    
            <el-form-item label="属性" prop="app">
              <el-select
                v-model="ruleForms.items[index].app"
                placeholder="请选择属性"
                @change="getMaterial"
              >
                <el-option
                  v-for="item in apps"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="大分类" prop="material" size="small">
              <el-select
                v-model="ruleForms.items[index].material"
                placeholder="请选择大分类"
              >
                <el-option
                  v-for="item in materials"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                v-if="index != 0"
                type="danger"
                @click="del(index)"
                size="small"
                >删除</el-button
              >
              <el-button
                v-if="index == 0"
                type="success"
                @click="addItem"
                size="small"
                >新增</el-button
              >
            </el-form-item>
          </el-form>
        </el-row>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          startTime: "",
          endTime: "",
          apps: [],
          materials: [],
          ruleForms: { items: [{}] },
        };
      },
      methods: {
        addItem() {
          // this.i += 1;
          this.ruleForms.items.push({
            date: "",
            material: "", //大分类
            app: "",
          });
          // console.log(this.i);
        },
        // 删除使用时间
        del(index) {
          this.ruleForms.items.splice(index, 1);
        },
        getMaterial() {
          console.log(123);
        },
      },
    };
    </script>
    <style scoped lang="less">
    </style>
    
    展开全文
  • form表单点击一次添加一行和删除一行 1、效果图 2、代码 结构 <el-row v-for="(item, index) in ruleForms.items" :key="index" style="margin-left: 0.5vw" > <el-col :span="22"> <el-form ...
  • //在表格后面添加一行 }else { alert('最大行数不能超过20行'); } }); }); function deltr(opp) { var length = $("#dynamicTable tbody tr").length; if (length ) { alert("至少保留一行"); } else { $(opp)....
  • 报名时候不确定报名人数,姓名表单默认只有个,可自主添加表单。大概就是这个意思吧! 还有个升级版本,请看另个资源
  • 1.如果你的table中并没有url,那么这个很好解决,先获取到目前table中的数据,然后添加一行,在重新加载一下就可以了 var dataBak = []; //定义一个空数组,用来存储之前编辑过的数据已经存放新数据 var tableBak = ...
  • vue中form表单点击一次添加一行

    千次阅读 2019-05-13 17:38:14
    '星期' } , { value : '星期二' , label : '星期二' } , { value : '星期三' , label : '星期三' } , { value : '星期四' , label : '星期四' } , { value : '星期五' , label : '星期五' } , { value : '...
  • 本效果带tab切换效果。...js实现自动添加删除一行。添加删除时序号自动改变。每一行后面有添加一行按钮,点击时自动在点击行的下面添加一行。新添加行有文本框,文本框输入值失去焦点后自动变为输入的值。
  • 求问,如何做一个二级联动的下拉表单(select),每点击一下按钮,表单增加一行。我现在的问题是,表单增加后,二级联动就没有效果了。 这是html和表单元素代码 <!DOCTYPE html> <meta charset="utf-8"> ...
  • 表单代码 <template v-for="(item, index) in ruleForm.driver"> <el-form-item label="驾驶员姓名:" prop="driverName" style="margin-right: 20px"> <!--<el-input v-model="ruleForm....
  • 暂时只实现了在新增行和列尾新增列功能。之后有时间再完善在指定和列后新增。 点击进入演示页面 点击查看源码
  • 用javascript向表格新增一行

    千次阅读 2018-03-06 10:50:54
    例:jsp页面有个以“myTable”为id的表格,现在我们想要向表格新增一行,操作如下:var table = document.getElementById("myTable");var tr = document.createElement("tr");tr = table....
  • 想实现点击按钮在表格添加一行的功能,但发现layui并未集成该工具栏,因此,需要自己手动添加这个功能;这篇文章主要介绍了layui点击按钮给table添加一行,需要的朋友可以参考下
  • 而我将拼接中的{{form.relationship}}改为{/{form.relationship}}时会在表单的第一行出现增加的表单行: ![图片说明](https://img-ask.csdn.net/upload/201908/02/1564730313_330232.png) ![图片说明]...
  • EasyUI的插入一行到某行和添加一行

    千次阅读 2018-07-04 15:02:11
  • 新增表单控件 email 电子邮箱文本框 &lt;input type="email" name="" id=""&gt; tel 电话号码 &lt;input type="tel" name="" id=""...
  • 最近做的项目中有一个需求就是要求在线填写表格内容时,不够的话可以动态添加一行,我这里用的jQuery来实现,下面是我项目截图展现: 当点击“添加输入框”按钮时,就会自动添加一行 下面我们来一下代码实现(把...
  • 1:先在HTML中设计一个表格,给这个表格设置ID,方便等下在JS中获取这个表格,为了方便简单,这里就只设计一行数据了,给这个行也设置一个ID,然后再弄一些数据 HTML表格设计代码截图: 2:现在再去JS中写一个方法...
  • 主要介绍了js简单实现表单中点击按钮动态增加输入框数量的方法,涉及javascript鼠标点击事件及insertAdjacentHTML方法的相关使用技巧,需要的朋友可以参考下
  • <!... ,chrome=1" /> <title> 页面名称 ... <tr><td>aaa</td><td>bbb</td><td>ccc</td></tr> <tr><td>1</td><td>45...//这里的1是求和的列号,你每次修改或增加一行数据之后都要再次调用下这个函数 });  
  • jq实现表格的新增一行和删除一行 代码如下图: <table id="dynamicTable" class="dynamicTable" width="100%" border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <td ...
  • JavaScriptt 增加表格一行
  • js动态表格添加一行删除一行保存一行
  • //这里就是一开始渲染就添加一个空的一行数据,或者添加一下数据也可以 , data: [{state: "0", lsh: "", name: ""}, {state: "1", lsh: "", name: ""}] , done: function (res, curr, count) { //添加下拉菜单...
  • EXT动态新增一行

    2011-09-15 20:52:49
    EXT动态新增一行 用的column布局,点击一个按钮能添加一行组件,如文本框,有下拉框等。
  • vue+vant组件 实现移动端页面表单组件只显示一行内容问题 使用的cdn的方式引入vant组件表单组件只显示第一行内容,需要把单标签改成双标签的形式 <van-form> <van-field v-model="form.username" label=...
  • 点击加号新增一行

    千次阅读 2018-09-11 21:49:00
    https://zhidao.baidu.com/question/411543907.html 转载于:https://www.cnblogs.com/qqyong123/p/9630593.html

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 99,880
精华内容 39,952
关键字:

表单新增一行