element树形表格动态表头（附带删除）

描述问题 树形表格无法动态添加表头
我们要的效果是这样的

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