vue3 ElementPlus tabs 嵌套不同列的 table 动态实现 ？

Question

如果每个 tab 里的 el-table-column 列数，内容不同，有办法写成动态循环的吗？

<template>
  <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
    <el-tab-pane
      v-for="tab in tabsData"
      :key="tab.name"
      :label="tab.label"
      :name="tab.name"
    >
      <el-table :data="tab.tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180" />
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="address" label="地址" />
      </el-table>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 响应式数据
const activeTab = ref('tab1')
const tabsData = reactive([
  {
    name: 'tab1',
    label: '表格1',
    tableData: []
  },
  {
    name: 'tab2',
    label: '表格2',
    tableData: []
  }
])

// 模拟异步数据获取
const fetchTableData = async (tabName) => {
  // 这里可以替换为真实的API调用
  return new Promise(resolve => {
    setTimeout(() => {
      const mockData = {
        tab1: [
          { date: '2023-01-01', name: '张三', address: '上海市' },
          { date: '2023-01-02', name: '李四', address: '北京市' }
        ],
        tab2: [
          { date: '2023-02-01', name: '王五', address: '广州市' },
          { date: '2023-02-02', name: '赵六', address: '深圳市' }
        ]
      }
      resolve(mockData[tabName])
    }, 500)
  })
}

// 初始化数据
const initializeData = async () => {
  for (const tab of tabsData) {
    tab.tableData = await fetchTableData(tab.name)
  }
}

// 处理标签切换
const handleTabClick = (tab) => {
  ElMessage.info(`切换到 ${tab.props.label}`)
  // 这里可以添加标签切换时的特定逻辑
}

// 生命周期钩子
onMounted(() => {
  initializeData()
})
</script>

Answer 1

这样行吗🤣
案例