vue 在el-tabs动态添加添加table

LoveEate2025-09-26 11:10

复制代码

代码是半成品

<el-tabs v-model="activeTab" v-loading="fieldMappingLoading" 
@tab-click="handleTabClick">
  <el-tab-pane
    v-for="tab in fieldMappingTabs"
    :key="tab.id"
    :label="tab.label"
    :name="tab.name"
  >
    <el-table
      :key="tab.id"
      :data="tab.data"
      stripe
      border
      style="width: 100%"
    >

      <el-table-column label="名称" width="120">
        <template #default="{ row }">
          <el-input
            v-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-input
            v-model="row.key"
            placeholder="请输入新字段名"
            size="small"
          />
        </template>
      </el-table-column>
      <el-table-column label="描述" width="150">
        <template #default="{ row }">
          <el-input
            v-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