Vue+element 实现表格的动态增加行

功能需求：1、实现一个表格，可以增加行，可以修改每一行的数据；

              2、获取选中的行的数据，获取选中行的索引；3、根据获取的行的索引删除相应的一行的数据。

tableData的数据是写死的，具体开发可以从后台获取。

具体的代码实现如下：

<template><div class="tableDate"><div class="button" style="width:3%;float:right;"><P><el-button class="el-icon-plus" @click.prevent="addRow()"></el-button></P><p><el-button class="el-icon-minus" @click.prevent="delData()"></el-button></p></div><div class="table"><el-table:data="tableData"ref="table"tooltip-effect="dark"borderstripestyle="width: 95%"@selection-change='selectRow'><el-table-column type="selection" width="45" align="center"></el-table-column><el-table-column label="序号"  type="index" width="60" align="center"></el-table-column><el-table-column  label="地址" align="center"><template slot-scope="scope"><el-input v-model="scope.row.address"></el-input></template></el-table-column><el-table-column label="男猪脚"><template slot-scope="scope"><el-input v-model="scope.row.name"></el-input></template></el-table-column><el-table-column label="女猪脚"><template slot-scope="scope"><el-input v-model="scope.row.loveer"></el-input></template></el-table-column><el-table-column prop="name" label="天气"><template slot-scope="scope"><el-input v-model="scope.row.weather"></el-input></template></el-table-column><el-table-column label="电话"><template slot-scope="scope"><el-input v-model="scope.row.phone"></el-input></template></el-table-column><el-table-column label="牵手日"><template slot-scope="scope"><el-input v-model="scope.row.date"></el-input></template></el-table-column><el-table-column label="纪念日"><template slot-scope="scope"><el-input v-model="scope.row.mdate"></el-input></template></el-table-column></el-table></div></div>
</template>

<script>import '../../../assets/css/commlist.css'import '../../../assets/css/comm.sass'import '../../../assets/css/commscoped.sass'export default {data () {return {tableData: [{rowNum: 1,address: '西安城墙',name: '小哥',weather: '下雪',phone: '0771-5201314',date: '2016-11-22',mdate: '2018-04-10',loveer: '甜甜圈'}, {rowNum: 2,address: '西安城墙',name: '小哥',weather: '下雪',phone: '0771-5201314',date: '2016-11-22',mdate: '2018-04-10',loveer: '甜甜圈'}, {rowNum: 3,address: '西安城墙',name: '小哥',weather: '下雪',phone: '0771-5201314',date: '2016-11-22',mdate: '2018-04-10',loveer: '甜甜圈'}, {rowNum: 4,address: '西安城墙',name: '小哥',weather: '下雪',phone: '0771-5201314',date: '2016-11-22',mdate: '2018-04-10',loveer: '甜甜圈'}, {rowNum: 5,address: '西安城墙',name: '小哥',weather: '下雪',phone: '0771-5201314',date: '2016-11-22',mdate: '2018-04-10',loveer: '甜甜圈'}],selectlistRow: []}},methods: {// 获取表格选中时的数据selectRow (val) {this.selectlistRow = val},// 增加行addRow () {var list = {rowNum: '',address: this.address,name: this.name,weather: this.weather,phone: this.phone,date: this.date,mdate: this.mdate,loveer: this.loveer}this.tableData.unshift(list)},// 删除方法// 删除选中行delData () {for (let i = 0; i < this.selectlistRow.length; i++) {let val = this.selectlistRow// 获取选中行的索引的方法// 遍历表格中tableData数据和选中的val数据，比较它们的rowNum,相等则输出选中行的索引// rowNum的作用主要是为了让每一行有一个唯一的数据，方便比较，可以根据个人的开发需求从后台传入特定的数据val.forEach((val, index) => {this.tableData.forEach((v, i) => {if (val.rowNum === v.rowNum) {// i 为选中的索引this.tableData.splice(i, 1)}})})}// 删除完数据之后清除勾选框this.$refs.tableData.clearSelection()}}}
</script>

Vue+element 实现表格的动态增加行相关推荐

表格动态增加行(JS)
我最近一直在学Javascript, 因为在项目用的比较多,虽然现在大家都在说Web标准,实际上还没有一个严格的定义,我理解的Web标准是把结构.表现.行为这三者结合表现出来就OK了.那用什么来表现呢 ...
java行数可变的表格,怎么在表格中自动增加行，并对输入的数据作判断
当前位置:我的异常网» Java Web开发 » 怎么在表格中自动增加行,并对输入的数据作判断怎么在表格中自动增加行,并对输入的数据作判断 www.myexceptions.net 网友分享于:2 ...
js动态增加行删除行
//动态增加行 function addRow(tab){var title = "";var table = document.getElementById(tab);var n ...
vue element计算表格合计问题
vue element计算表格合计问题问题:当表格的el-table-column标签下的属性prop属性值为'对象.属性'时,将不能自动合计. 例如: <el-tableborderv-lo ...
vue element el-table表格勾选求和 el-table 勾选获取表格某几列数据求和
vue element el-table 表格勾选获取几列数据求和 el-table表格勾选求和先看案例如下图所示:el-table 勾选后求出支付金额数据,计算出总金额数据. 我们来一步步分析方便 ...
element UI表格绑定动态数据与selection复选操作
element UI表格绑定动态数据与selection复选操作的坑案例介绍:此案例是要求完成对客户的批量删除功能,因为客户有多条数据所以要结合分页组件来实现,并且批量删除按钮默认是禁用的,当有数据 ...
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据需要向服务端提交一 ...
vue element el-table 表格搜索搜索表格内容关键字标红关键字高亮显示
vue element el-table 表格搜索搜索表格内容关键字标红关键字高亮显示最近公司项目需求,搜索表格的内容,并且需要搜索的关键字高亮显示(关键字标红),如图所示最终效果: 1.在需要 ...
基于vue+element实现多级菜单动态生成
使用element的NavMenu组件+vue的组件递归实现动态生成菜单. 首先创建对象记录菜单的标题.链接.子集等信息. menus: [{title: "首页",icon: & ...

Vue+element 实现表格的动态增加行

Vue+element 实现表格的动态增加行相关推荐

最新文章

热门文章