vue动态添加行/删除行

原创 已于 2024-10-09 10:45:49 修改 · 9.5k 阅读 · 59 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

于 2022-05-20 09:08:01 首次发布

vue动态添加行

页面效果

在这里插入图片描述

点击相应的添加后，每个 el-table 增加一行
在这里插入图片描述

代码：

<el-card>
                <div class="titleitem">
                  <span >工作/学习经历</span>
                </div>
                <el-table
                  :data="experienceData"
                  stripe
                  style="width: 100%">
                  <el-table-column
                    prop="starttime"
                    label="开始时间"
                    width="260">
                    <template slot-scope="scope">
                      <el-date-picker
                        type="month"
                        size="small"
                        placeholder="选择年月"
                        v-model="scope.row.starttime">
                      </el-date-picker>
                      <!-- <el-input></el-input> -->
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="endtime"
                    label="结束时间"
                    width="260">
                    <template slot-scope="scope">
                      <el-date-picker
                        type="month"
                        size="small"
                        placeholder="选择年月"
                        v-model="scope.row.endtime">
                      </el-date-picker>
                      <!-- <el-input v-model="scope.row.endtime"></el-input> -->
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="resume"
                    label="简历"
                    width="380">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.resume"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="operate"
                    label="操作">   
                    <template slot-scope="scope">
                      <el-button 
                        size="mini" 
                        type="success" 
                        icon="el-icon-save" 
                        @click="handlesaveExperience(scope.$index, scope.row)">保存
                      </el-button>
                      <el-button 
                        size="mini" 
                        type="danger" 
                        icon="el-icon-delete" 
                        @click="handleDeleteExperience(scope.$index, scope.row)">删除
                      </el-button>
                      
                    </template>                
                  </el-table-column>            
                </el-table>
                <div>
                  <el-button 
                    type="primary" 
                    icon="el-icon-plus" 
                    size="mini" 
                    @click="handleAddExperienceline">新增学习/工作简历
                  </el-button>
                </div>
              </el-card>
              <el-card>
                <div class="titleitem">
                  <span >奖惩情况</span>
                </div>
                <el-table
                  :data="bonuspenaltyData"
                  stripe
                  style="width: 100%">
                  <el-table-column
                    prop="status"
                    label="奖励/惩罚"
                    width="100">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.status"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="奖惩年月"
                    width="260">
                    <template slot-scope="scope">
                      <el-date-picker
                        type="month"
                        size="small"
                        placeholder="选择年月"
                        v-model="scope.row.date">
                      </el-date-picker>
                      <!-- <el-input></el-input> -->
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="num"
                    label="奖惩文号"
                    width="180">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.num"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="remarks"
                    label="备注"
                    width="360">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.remarks"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="operate"
                    label="操作">   
                    <template slot-scope="scope">
                      <el-button 
                        size="mini" 
                        type="success" 
                        icon="el-icon-save" 
                        @click="handlesaveBonuspenalt(scope.$index, scope.row)">保存
                      </el-button>
                      <el-button 
                        size="mini" 
                        type="danger" 
                        icon="el-icon-delete" 
                        @click="handleDeleteBonuspenalt(scope.$index, scope.row)">删除
                      </el-button>                      
                    </template>                
                  </el-table-column>            
                </el-table>
                <div>
                  <el-button 
                    type="primary" 
                    icon="el-icon-plus" 
                    size="mini" 
                    @click="handleAddBonuspenaltLine">新增奖惩情况
                  </el-button>
                </div>
              </el-card>

              <el-card>
                <div class="titleitem">
                  <span >年度考核</span>
                </div>
                <el-table
                  :data="AnnualAssessmentData"
                  stripe
                  style="width: 100%">
                  <el-table-column
                    prop="year"
                    label="年度"
                    width="260">
                    <template slot-scope="scope">
                      <el-date-picker
                        type="year"
                        size="small"
                        placeholder="选择年"
                        v-model="scope.row.year">
                      </el-date-picker>
                      <!-- <el-input v-model="scope.row.year"></el-input> -->
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="result"
                    label="结果"
                    width="260">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.result"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="remarks"
                    label="备注"
                    width="380">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.remarks"></el-input>
                    </template>
                  </el-table-column>            
                  <el-table-column
                    prop="operate"
                    label="操作">   
                    <template slot-scope="scope">
                      <el-button 
                        size="mini" 
                        type="success" 
                        icon="el-icon-save" 
                        @click="handlesaveAnnualAssessment(scope.$index, scope.row)">保存
                      </el-button>
                      <el-button 
                        size="mini" 
                        type="danger" 
                        icon="el-icon-delete" 
                        @click="handleDeleteAnnualAssessment(scope.$index, scope.row)">删除
                      </el-button>                      
                    </template>                
                  </el-table-column>            
                </el-table>
                <div>
                  <el-button 
                    type="primary" 
                    icon="el-icon-plus" 
                    size="mini" 
                    @click="handleAddAnnualAssessmentLine">新增年度考核
                  </el-button>
                </div>
              </el-card>

data部分

  data() {
    return {
      options:[],
      value:'',
      value1:'',
      month1:'',
      month2:'',
      experienceData: [{
          starttime: '1996-05',
          endtime: '1999-06',
          resume: '就读于xxxx学习xxxx专业',
        }, ],
      bonuspenaltyData:[{
        status:'奖励',
        date:'2022-05',
        num:'123456',
        remarks:'助人为乐'
      }],
      AnnualAssessmentData: [{
        year:'2021',
        result:'合格',
        remarks:'考核通过',
      }],
    };
  },

methods部分

methods: {
    //增加经验行
    handleAddExperienceline() {
      if (this.experienceData == undefined) {
        this.experienceData = new Array();
      }
      let obj = {};
      
      this.experienceData.push(obj);
    },
    //保存经验行
    handlesaveExperience(a, b) {
      console.log(a + b);
    },
    //删除经验行
    handleDeleteExperience(index) {
      console.log(index);
			this.experienceData.splice(index, 1)
    },

    //增加奖惩行
    handleAddBonuspenaltLine() {
      if (this.bonuspenaltyData == undefined) {
        this.bonuspenaltyData = new Array();
      }
      let obj = {};
      
      this.bonuspenaltyData.push(obj);
    },
    //保存奖惩行
    handlesaveBonuspenalt(a, b) {
      console.log(a + b);
    },
    //删除奖惩行
    handleDeleteBonuspenalt(index) {
      console.log(index);
			this.bonuspenaltyData.splice(index, 1)
    },

    //增加年度考核行
    handleAddAnnualAssessmentLine() {
      if (this.AnnualAssessmentData == undefined) {
        this.AnnualAssessmentData = new Array();
      }
      let obj = {};
      
      this.AnnualAssessmentData.push(obj);
    },
    //保存年度考核行
    handlesaveAnnualAssessment(a, b) {
      console.log(a + b);
    },
    //删除年度考核行
    handleDeleteAnnualAssessment(index) {
      console.log(index);
			this.AnnualAssessmentData.splice(index, 1)
    },

  }

注意：
若缺依赖，安装相应依赖。

hellotutu
关注
vue表单点击按钮增加或者删除一行
...
04-16 2203
vue表单点击按钮增加或者删除一行
Vue 3,element table表格动态添加
一个努力搬砖的前端开发
01-15 1873
el-table实现表格动态新增/插入/删除表格行，可编辑单元格。
Vue创建table表格（添加和删除）
hyfound的博客
01-22 9741
首先引入Vue.js &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"&gt;&lt;/script&gt; &lt;div&gt;         &lt;table id="table"&gt;             &
JavaScript动态操作HTML表格实战：实现行的增加与删除功能
最新发布
weixin_42452483的博客
10-11 423
HTML表格通过<table><tr><th>和<td>等标签构建行、列与表头结构，形成语义清晰的数据展示框架。在DOM中，每个表格元素均可被JavaScript访问与操作，实现动态内容更新。通过原生JS可获取表格节点并调用其方法，为后续增删改查功能奠定基础。是原生 JavaScript 中用于创建任意 HTML 元素节点的核心方法。相较于和这类专用于表格的操作 API，提供了更强的灵活性和控制力，尤其适用于需要插入包含输入框、下拉菜单、按钮或其他复杂控件的表格行场景。
elementui加vue.js 生成可输入表格可动态增加列
05-11
elementui加vue.js 生成可输入表格可动态增加列并且可编辑table
[Vue篇]vue动态添加行/删除行
y2020520的博客
01-04 7043
点击相应的添加后，每个 el-table 增加一行。若缺依赖，安装相应依赖。
Vue 表格动态添加行/删除行
猫脸码客的博客
06-20 739
【代码】Vue 表格动态添加行/删除行。
Vue实现动态添加或者删除对象和对象数组的操作方法
10-17
在Vue.js框架中，动态添加或删除对象和对象数组是常见的需求，特别是在处理表单数据、列表展示等场景。本文将详细讲解如何在Vue项目中实现这一功能。 首先，我们来看一下添加对象到对象数组的核心代码： ```...
vue3在弹出窗表格动态添加/删除/编辑行
weixin_52830464的博客
06-17 718
【代码】vue3+el-table表格动态添加/删除/编辑行。
Vue+Element实现动态生成新表单并添加验证功能
10-16
本文主要阐述了如何使用Vue.js和Element UI来实现表单的动态生成，并为这些动态生成的表单添加了验证功能。 知识点一：Vue.js框架基础 Vue.js是一个构建用户界面的渐进式JavaScript框架，核心库仅关注视图层，易于...
vue动态表格添加删除数据特效代码
03-20
在“vue动态表格添加删除数据特效代码”项目中，我们主要关注的是如何在Vue环境中实现一个动态表格，允许用户添加、删除和批量删除表格数据。 首先，让我们详细了解一下Vue中的动态数据绑定。Vue的核心特性之一就是...
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
10-15
主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 点击按钮增加一行的方法
10-18
今天小编就为大家分享一篇vue 点击按钮增加一行的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）
10-15
本文将探讨如何在Vue table中动态添加一列数据，并解决在动态添加后，新列的数据无法通过v-model实时更新的问题，同时也会涉及Vue table的动态锁定和解锁列的功能。 一、动态添加表格列的问题及解决方案 在Vue应用...
动态增加行列
俊人呀的博客
08-20 963
1211
VUE动态添加行
MircoO的博客
04-18 455
【代码】VUE动态添加行。
Vue实现一个动态添加行的表格？
初学者
05-22 2300
在Vue中实现一个动态添加行的表格可以通过以下步骤来完成，如下所示。
vue3+element-plus: el-table表格动态添加或删除行
叶子的博客
12-09 7889
vue3+element-plus：el-table表格动态添加删除行（含输入框/下拉框/序号）
vue3 element el-table实现表格动态增加/删除/编辑表格行，带有校验规则
m0_46364033的博客
11-15 3245
在项目中遇到需要实现表格动态的新增、编辑、删除表格行的需求，同时带有校验规则
vue动态添加行
08-15
在 Vue 框架中实现动态添加表格行的功能，可以通过操作数据数组来实现，因为 Vue 的响应式机制会自动更新视图。以下是一个完整的实现方法： ### 实现逻辑 1. **数据定义**：在 `data()` 中定义一个 `tableData` 数组来存储表格数据，并定义一个 `newRow` 对象来表示新行的初始数据。 2. **添加行方法**：在 `methods` 中定义一个 `addRow()` 方法，通过 `push()` 方法将新的行数据添加到 `tableData` 数组中。 3. **表格渲染**：使用 `v-for` 指令循环 `tableData` 数组来渲染表格行。 4. **触发按钮**：绑定一个按钮点击事件 `@click="addRow"` 来触发添加行的操作。 ### 示例代码 以下是一个完整的 Vue 动态添加表格行的示例代码： ```html <template> <div> <table border="1"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr v-for="(item, index) in tableData" :key="index"> <td><input v-model="item.id" /></td> <td><input v-model="item.name" /></td> <td><input v-model="item.age" /></td> </tr> </tbody> </table> <button @click="addRow">Add Row</button> </div> </template> <script> export default { data() { return { tableData: [ { id: 1, name: 'John', age: 30 }, { id: 2, name: 'Doe', age: 25 } ], newRow: { id: null, name: '', age: null } // 新行的初始数据 }; }, methods: { addRow() { // 添加新行数据到表格数据数组 this.tableData.push(Object.assign({}, this.newRow)); } } }; </script> <style> table { width: 100%; border-collapse: collapse; } th, td { padding: 8px; text-align: left; } input { width: 100%; } </style> ``` ### 实现说明 - **数据绑定**：通过 `v-model` 双向绑定，用户可以在输入框中修改表格行的内容，数据会自动更新到 `tableData` 中。 - **响应式更新**：当调用 `addRow()` 方法时，由于 Vue 的响应式机制，表格会自动更新并显示新增的行。 - **对象复制**：使用 `Object.assign({}, this.newRow)` 创建一个新的对象，避免直接引用 `newRow` 导致多个行数据共享同一个对象引用的问题[^1]。 ### 拓展功能 - **删除行**：可以通过在每一行添加一个删除按钮，并绑定一个 `removeRow(index)` 方法，使用 `splice(index, 1)` 删除指定索引的行。 - **动态表单**：如果需要更复杂的动态表单交互，可以结合 Vue 的组件化思想，将每一行封装成一个组件，实现更灵活的数据管理。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值