elementui table dynamic loading

Requirements: Click on different tabs to display different table data.
The idea is to maintain a table header data in each tab and the data that the table needs to display.
Front-end effect:

Front-end implementation:

 <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>

data structure:

    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: "音乐"
                }
            ]
        },
    ]);

If you have any questions, please add v 876942434 to make progress together~