vue 在el-tabs动态添加添加table
代码是半成品<el-tabs v-model="activeTab" v-loading="fieldMappingLoading" @tab-click="handleTabClick"><el-tab-panev-for="tab in fieldMappingTabs":key="tab.id":label="tab.label":name="tab.name"><el-table:key="tab.id":data="tab.data"stripeborderstyle="width: 100%"><el-table-column label="名称" width="120"><template #default="{ row }"><el-inputv-model="row.name"placeholder="请输入名称"size="small"/></template></el-table-column><el-table-column prop="oldFieldName" label="当前字段名" width="120" /><el-table-column label="新字段名" width="150"><template #default="{ row }"><el-inputv-model="row.key"placeholder="请输入新字段名"size="small"/></template></el-table-column><el-table-column label="描述" width="150"><template #default="{ row }"><el-inputv-model="row.desc"placeholder="请输入描述"size="small"/></template></el-table-column><el-table-column label="操作" width="150"><template #default="{ row }"><div class="action-buttons"><el-button size="small" type="primary" @click="handleUpdateField(row)">保存</el-button><el-button size="small" type="danger" @click="handleDeleteField(row)">删除</el-button></div></template></el-table-column></el-table></el-tab-pane> </el-tabs>
事件
categories.forEach((category,index) => {// 这里可以根据分类筛选组件,暂时显示所有组件tabs.push({id:"tab_"+index,name: category,label: getCategoryLabel(category),data: index==0?activeTabList.value:[]}) })
注意点
要想在A Tab下的table中写数据不影响到B Tab下的table中的数据 关键点就在于el-tab-pane 和
el-table 中加入key