使用纯html+elementUI写一个tabs标签页,每页有增删改查功能的表格的代码

好的，以下是一个基于HTML和ElementUI的Tabs标签页，每个标签页中包含一个带有增删改查功能的表格的代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tab页表格</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body> <div id="app"> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="页1" name="1"> <el-table :data="tableData1" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> <el-button type="primary" @click="handleAdd">新增</el-button> </el-tab-pane> <el-tab-pane label="页2" name="2"> <el-table :data="tableData2" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> <el-button type="primary" @click="handleAdd">新增</el-button> </el-tab-pane> </el-tabs> </div> <script> new Vue({ el: '#app', data: { activeName: '1', tableData1: [ {name: '张三', age: 18}, {name: '李四', age: 22}, {name: '王五', age: 30}, ], tableData2: [ {name: 'Tom', age: 25}, {name: 'Jerry', age: 20}, {name: 'Mike', age: 28}, ] }, methods: { handleClick(tab, event) { console.log(tab, event); }, handleAdd() { // 在当前活动标签页的表格中添加一个空行 if (this.activeName === '1') { this.tableData1.push({ name: '', age: '' }); } else if (this.activeName === '2') { this.tableData2.push({ name: '', age: '' }); } }, handleEdit(index, row) { // 编辑当前活动标签页的表格中的一行 if (this.activeName === '1') { this.$set(this.tableData1, index, row); } else if (this.activeName === '2') { this.$set(this.tableData2, index, row); } }, handleDelete(index, row) { // 删除当前活动标签页的表格中的一行 if (this.activeName === '1') { this.tableData1.splice(index, 1); } else if (this.activeName === '2') { this.tableData2.splice(index, 1); } } } }); </script> </body> </html> ``` 这个示例代码中，我们使用了ElementUI中的`el-tabs`组件来创建一个Tabs标签页，其中包含两个标签页，每个标签页中都包含一个`el-table`组件用于显示数据，以及一个`el-button`组件用于添加新数据。在每个表格中，我们定义了三个表格列：姓名、年龄和操作。操作列中包含了编辑和删除两个按钮，分别用于编辑和删除当前行的数据。在添加新数据时，我们可以通过点击“新增”按钮在表格中添加一行空数据。在Vue.js中，我们通过定义`data`对象来存储每个标签页对应的数据，通过定义一些方法来处理用户的交互操作。例如，`handleAdd()`方法用于添加新数据，`handleEdit()`方法用于编辑数据，`handleDelete()`方法用于删除数据。在这些方法中，我们使用了Vue.js中的一些API来修改`data`对象中的数据，以实现表格数据的增删改查功能。

阅读全文

使用纯html+elementUI写一个tabs标签页,每页有增删改查功能的表格的代码

相关推荐

html表格增删改查

vue+vue-resource+elementUI table组件实现增删改查和分页源码

js+html写的实现表格的动态增删改查和表单验证

Vue + Elementui实现多标签页共存的方法

vue+elementUI

vue路由单页组件+ElementUI的使用更新.docx

淘宝SDK模块代码TABS标签页代码

原生JavaScript写出Tabs标签页的实例代码

jQuery+easyui tabs 标签页

纯css+js写的一个简单的tab标签页带样式

vue elementUI使用tabs与导航栏联动

javascript面向对象tab(增删改查)案例.zip

HTML5+CSS3实现Tabs选项卡特效特效代码

jQuery EasyUI 布局之动态添加tabs标签页

手动动态改变el-tabs标签页顺序

js+css实现tabs标签管理

MVC+EasyUI+三层新闻网站建立 tabs标签制作方法（六）

BootStrap实现带有增删改查功能的表格(DEMO详解)

html+js实现增删改查，超简单

最新推荐

vue+element tabs选项卡分页效果

解决elementUI 切换tab后 el_table 固定列下方多了一条线问题

高清艺术文字图标资源，PNG和ICO格式免费下载

管理建模和仿真的文件

DMA技术：绕过CPU实现高效数据传输

SGM8701电压比较器如何在低功耗电池供电系统中实现高效率运作？

mui框架HTML5应用界面组件使用示例教程

"互动学习：行动中的多样性与论文攻读经历"

【数据传输高速公路】：总线系统的深度解析

如何结合PID算法调整PWM信号来优化电机速度控制？请提供实现这一过程的步骤和代码示例。