您现在的位置是:网站首页> 编程资料编程资料
vue+elementui实现动态添加行/可编辑的table_vue.js_
2023-05-24
313人已围观
简介 vue+elementui实现动态添加行/可编辑的table_vue.js_
本文实例为大家分享了vue+elementui实现动态添加行、可编辑的table的具体代码,供大家参考,具体内容如下
HTMl代码块:
删除
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; }); },实现效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- typescript+vite项目配置别名的方法实现_vue.js_
- Typescript中使用引用路径别名报错的解决方法_javascript技巧_
- typescript在node.js下使用别名(paths)无效的问题详解_javascript技巧_
- iview+vue实现导入EXCEL预览功能_vue.js_
- Node.js处理I/O数据之使用Buffer模块缓冲数据_node.js_
- vue实现页面添加水印_vue.js_
- vue中使用gantt-elastic实现可拖拽甘特图的示例代码_vue.js_
- 详解在JavaScript中如何判断变量类型_javascript技巧_
- 微信小程序实现多列选择器_javascript技巧_
- npm脚本库组织在项目中的地位详解_JavaScript_
