vue+elementui实现动态添加行/可编辑的table
更新时间:2022年07月06日 09:10:43 作者:LBJsagiri
这篇文章主要为大家详细介绍了vue+elementui实现动态添加行/可编辑的table,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue+elementui实现动态添加行、可编辑的table的具体代码,供大家参考,具体内容如下
HTMl代码块:
<el-col :span="24"> <el-form-item label="与承租户同户籍成员:" :label-width="formLabelWidth"> <el-table :data="zichandetail.members" :border=true style="width: 99.99%;"> <el-table-column type="index" label="序号" width="100"></el-table-column> <el-table-column prop="name" label="姓名" width="150"> <template slot-scope="scope"> <el-input v-model="scope.row.name" autocomplete="off" size="small" placeholder="请输入姓名"></el-input> </template> </el-table-column> <el-table-column prop="name" label="与承租人关系" width="150"> <template slot-scope="scope"> <el-input v-model="scope.row.relationship" autocomplete="off" size="small" placeholder="请输入与承租人关系"></el-input> </template> </el-table-column> <el-table-column prop="name" label="联系电话" width="150"> <template slot-scope="scope"> <el-input v-model="scope.row.mobile" autocomplete="off" size="small" placeholder="请输入联系电话"></el-input> </template> </el-table-column> <el-table-column prop="name" label="出生年月" width="150"> <template slot-scope="scope"> <el-date-picker v-model="scope.row.birthday" type="month" placeholder="请输入出生年月" value-format="yyyy-MM" size="small" class="allwidth"> </el-date-picker> </template> </el-table-column> <el-table-column prop="name" label="工作单位"> <template slot-scope="scope"> <el-input v-model="scope.row.gongzuodanwei" autocomplete="off" size="small" placeholder="请输入工作单位"></el-input> </template> </el-table-column> <el-table-column label="操作" width="100"> <template slot-scope="scope"> <el-button size="mini" type="danger" plain @click="delmembers(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> <i class="el-icon-circle-plus-outline" @click="addmembers"></i> </el-form-item> </el-col> </el-row>
js代码块:
1.添加操作
addmembers() { console.log('与承租户同户籍成员'); var member = this.zichandetail.members; console.log(member); var length = member.length; this.zichandetail.members.push( { id: parseInt(length), name: '', relationship: '', mobile: '', birthday: '', gongzuodanwei: '', }) },
2.删除操作
delmembers(index, row) { var that = this; this.$confirm('确认删除吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { //点击确定的操作(调用接口) var hasmembers = that.zichandetail.members; for (var i = 0; i < hasmembers.length; i++) { if (row.id == hasmembers[i].id) { that.zichandetail.members.splice(i, 1); // this.$message({ message: '删除成功', duration: 2000, type: 'success' }); } } }).catch(() => { //点取消的提示 return; }); },
实现效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
今天小编就为大家分享一篇vue 验证码界面实现点击后标灰并设置div按钮不可点击状态,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10vuex中this.$store.commit和this.$store.dispatch的基本用法实例
在vue的项目里常常会遇到父子组件间需要进行数据传递的情况,下面这篇文章主要给大家介绍了关于vuex中this.$store.commit和this.$store.dispatch的基本用法的相关资料,需要的朋友可以参考下2023-01-01vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
validate()可以指定校验范围内,或者是全局的 字段。而validateAll()只能校验全局。这篇文章主要介绍了vue+VeeValidate 校验范围(部分校验,全部校验) ,需要的朋友可以参考下2018-10-10浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
这篇文章主要介绍了浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论