carga dinámica de la tabla elementui

Requisitos: haga clic en diferentes pestañas para mostrar diferentes datos de la tabla.
La idea es mantener los datos del encabezado de la tabla en cada pestaña y los datos que la tabla necesita mostrar.
Efecto frontal:

Implementación frontal:

 <el-tabs
	  type="border-card" 
	  v-model="activeName" 
	  class="demo-tabs" 
	  @tab-click="handleClick">
   <el-tab-pane v-for="(item,index) in tabPan" 
    :key="index" :label="item.lable" 
    :name="item.name">
        <el-table :data="(item.tableData)">
            <el-table-column
                    type="index"
                    label="序号"
                    width="100">
            </el-table-column>
            <el-table-column v-for="(item,index) in item.tableHeader" 
             :key="index" 
             :property="item.name"
             :label="item.title"/>
        </el-table>
    </el-tab-pane>
 </el-tabs>

estructura de datos:

    const tabPan = ref([
        {
            "lable": "tab1",
            "name": "1",
            "tableData": [
                {
                    subject: '语文',
                    socre: '95',
                    teacher: '张三',
                },
                {
                    subject: '数学',
                    socre: '100',
                    teacher: '李四',
                }
            ],
            "tableHeader": [
                {
                    name: "subject",
                    title: "科目"
                },
                {
                    name: "socre",
                    title: "分数"
                },
                {
                    name: "teacher",
                    title: "阅卷老师"
                },
            ]
        },
        {
            "lable": "tab2",
            "name": "2",
            "tableData": [
                {
                    name: 'Tom',
                    age: '23',
                    address: '上海',
                },
                {
                    name: 'sandy',
                    age: '23',
                    address: '北京',
                }
            ],
            "tableHeader": [
                {
                    name: "name",
                    title: "姓名"
                },
                {
                    name: "age",
                    title: "年龄"
                },
                {
                    name: "address",
                    title: "家庭住址"
                },
            ]
        },
        {
            "lable": "tab3",
            "name": "3",
            "tableData": [
                {
                    phone: '123',
                    hobby: '打游戏',
                },
                {
                    phone: '345',
                    hobby: '看动漫',
                }
            ],
            "tableHeader": [
                {
                    name: "phone",
                    title: "联系电话"
                },
                {
                    name: "hobby",
                    title: "爱好"
                }
            ]

        },
        {
            "lable": "tab4",
            "name": "4",
            "tableData": [
                {
                    eat: '米饭',
                    music: '欧美',
                },
                {
                    eat: '面条',
                    music: '国语',
                }
            ],
            "tableHeader": [
                {
                    name: "eat",
                    title: "食物"
                },
                {
                    name: "music",
                    title: "音乐"
                }
            ]
        },
    ]);

Si tiene alguna pregunta, agregue v 876942434 para avanzar juntos ~