描述問題 樹形表格無法動態新增表頭
我們要的效果是這樣的

建立treeTable 頁面（元件）

<template>
    <div>
        <el-table
            :data="tableData1"
            style="width: 100%"
            row-key="id"
            lazy
            :load="load"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
 
>
            <af-table-column
                :key="index"
                v-for="(col,index) in cols"
                :prop="col.prop" :label="col.label">
            </af-table-column>
            <el-table-column :label="label"  width=
 
"200px">
                <template slot-scope="scope">
                    <slot name="bth_" :scope="scope">
                    </slot>
                </template>
            </el-table-column>
        </el-table>
    </div>
 

</template>
<script>
export default {
        props:{
            cols:"",
            tableData1:"",
            label:""
        }
}
</script>
<style type="text/css">
.icon-file {
    padding-right: 7px;
    padding-left: 18px
}

.icon-folder,
.icon-folder-open {
    padding-left: 7px;
    padding-right: 7px
}
</style>

B頁面使用
先引入

import treeTable  from "@/treeTable "

<template>
    <div class="grade">
        <!--        表格內容-->
        //:cols="cols " :tableData1="tableData1" :label="label"這些都是用來傳遞資料的，元件傳值，要是看不懂可以去學習一下元件傳值
        <treeTable :cols="cols " :tableData1="tableData1" :label="label">
        //這塊是插槽的傳遞，把下面按鈕傳遞過去
        //"{scope}"是用來接收表格的id用來刪除表格行 ,看不懂這塊的可以去看一下我之前文章的講解
            <template v-slot:bth_="{scope}">
                <el-button size="mini" type="primary">修改</el-button>
                <el-button type="danger" size="mini" @click="Del(scope)">刪除</el-button>
            </template>
        </treeTable>
    </div>
</template>
<script>

import treeTable from "@/treeTable "

export default {
    components: {
       treeTable 
    },
    methods: {
   //刪除方法，通過插槽來刪除（目前只能刪除一級選單）
        Del(scope) {
            this.tableData1.splice(scope.row.id-1, 1)
        },
    },
    data() {
        return {
            cols: [
            //label裡面新增表頭的內容，prop裡面的內容要和tableData1的鍵相對應來繫結資料
                {prop: 'grade', label: '型別編碼'},
                {prop: 'big_time', label: ''},
                {prop: 'temperature', label: ''},
                {prop: 'wait', label: ''},
                {prop: 'bake_time', label: ''},
                {prop: 'unit', label: ''},
                {prop: 'time', label: ''},
                {prop: 'end_user', label: ''},
                {prop: 'end_time', label: ''},
            ],
            // id是為了新增刪除方法
            tableData1: [{
                id: 1,
                grade: 'NL20202105362',
                big_time: "200",
                temperature: "",
                wait: "",
                bake_time: "",
                unit: "user",
                time: "2020-11-30 12:15:54",
                end_user:"user",
                end_time:"2020-10-15",
                children: [{
                    id: 31,
                    grade: 'NL20202105362',
                    big_time: "200",
                    temperature: "",
                    wait: "",
                    bake_time: "",
                    unit: "user",
                    time: "2020-11-30 12:15:54",
                    end_user:"user",
                    end_time:"2020-10-15",
                }, {
                    id: 32,
                    grade: 'NL20202105362',
                    big_time: "200",
                    temperature: "",
                    wait: "",
                    bake_time: "",
                    unit: "user",
                    time: "2020-11-30 12:15:54",
                    end_user:"user",
                    end_time:"2020-10-15",
                }]
            }, {
                id: 2,
                grade: 'NL20202105362',
                big_time: "200",
                temperature: "",
                wait: "",
                bake_time: "",
                unit: "user",
                time: "2020-11-30 12:15:54",
                end_user:"user",
                end_time:"2020-10-15",
            }, {
                id: 3,
                grade: 'NL2222222222222',
                big_time: "200",
                temperature: "",
                wait: "",
                bake_time: "",
                unit: "user",
                time: "2020-11-30 12:15:54",
                end_user:"user",
                end_time:"2020-10-15",
            }, {
                id: 4,
                grade: 'NL1111111111111',
                big_time: "200",
                temperature: "",
                wait: "",
                bake_time: "",
                unit: "user",
                time: "2020-11-30 12:15:54",
                end_user:"user",
                end_time:"2020-10-15",
            }]
        }
        }
    }

</script>