elementui动态添加表格行,element 动态添加行
这篇文章主要为大家详细介绍了某视频剪辑软件元素实现动态添加行/可编辑的表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件元素实现动态添加行、可编辑的桌子的具体代码，供大家参考，具体内容如下
HTMl代码块：
el-col :span=24
El-表单-项目标签=与承租户同户籍成员：:label-width=formLabelWidth
El-table:data= zichandetail。 members :border=true style= width:99.99%；
埃尔-表格-列类型=索引标签=序号宽度= 100 /El-表格-列
El-table-column prop= name label=姓名宽度=150
模板槽-范围="范围"
El-input v-model= scope。划。name autocomplete= off size= small
占位符=请输入姓名/el-input
/模板
/El-表格-列
El-table-column prop= name label=与承租人关系宽度=150
模板槽-范围="范围"
El-input v-model= scope。划。关系 autocomplete= off size= small placeholder=请输入与承租人关系/el-input
/模板
/El-表格-列
El-table-column prop= name label=联系电话宽度=150
模板槽-范围="范围"
El-input v-model= scope。划。移动自动完成=关闭大小=小
占位符=请输入联系电话/el-input
/模板
/El-表格-列
El-table-column prop= name label=出生年月宽度=150
模板槽-范围="范围"
El-date-picker v-model= scope。划。生日类型=月份占位符=请输入出生年月value-format= yyyy-MM size= small class= all width
/El-日期选择器
/模板
/El-表格-列
El-table-column prop= name label=工作单位
模板槽-范围="范围"
El-input v-model= scope。划。gonzoodanwei autocomplete= off size= small placeholder=请输入工作单位/el-input
/模板
/El-表格-列
埃尔-表格-列标签=操作宽度=100
模板槽-范围="范围"
El-button size= mini type= danger plain @ click= del成员(范围 index，scope.row)删除/el-button
/模板
/El-表格-列
/el-table
I class= El-icon-circle-plus-outline @ click=添加成员/I
/El-表单-项目
/el-col
/el-row
js代码块：
1.添加操作
addmembers() {
console.log(与承租户同户籍成员);
var成员=this。zichandetail。成员；
console.log(成员);
定义变量长度=成员.长度
this.zichandetail.members.push(
{
id: parseInt(长度),
名称： ,
关系： ,
手机： ,
生日： ,
工作单位： ,
})
},
2.删除操作
戴尔成员(索引，行){
变那个=这个
这个. $确认(确认删除吗？, 提示, {
confirmButtonText:确定，
取消按钮文本： 取消，
类型："警告"
}).然后(()={
//点击确定的操作（调用接口)
var有成员=that。zichandetail。成员；
for(var I=0；我有成员我){
if (row.id==hasmembers[i]).id) {
那个。zichandetail。成员。拼接(I，1)；
//这个message({ message:删除成功，持续时间：2000,类型：成功 });
}
}
}).catch(()={
//点取消的提示
返回；
});
},
实现效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。