【项目经验】elementui--table表格自定义表头及bug

一.思路

1. 首先我们肯定得循环表头，我们原生js封装的表格的实现原理就是这样。
2. 其次我们要把自己循环的label显示出来，对应的prop也要和表格数据相对应。
3. 用div标签循环都会出现错误（div里面套column），大家不要踩坑。第一项会跑到最后一项，去掉div即可。

二.代码

// html部分 用template循环也可以
<div class="tableDiv">
            <el-table :data="tableData" height="250" border style="width: 100%">
                <el-table-column 
                    v-for="(col, index) in cols" 
                    :key="index" 
                    :prop="col.prop" 
                    :label="col.label"
                    header-align="center" 
                    width="155" 
                    align="center">
                </el-table-column>
            </el-table>
 </div>

// js部分 注意cols数据格式
data () {
        return {
            cols: [
                {
                    label: "姓名",
                    prop: 'name'
                },
                {
                    label: "年龄",
                    prop: 'age'
                },
                {
                    label: "身高",
                    prop: 'clas'
                },
                {
                    label: "职业",
                    prop: 'job'
                },
                {
                    label: "工作经历",
                    prop: "jobs"
                }
            ],
            tableData: [
                {
                    'name': "禹宝宝",
                    "age": "18",
                    "clas": "185",
                    "job": "三目运算符创始人",
                    "jobs": "vue4.0突出贡献者"
                }
            ]
        };
    },

三.为什么div不行

        prop和label是cols中的属性，也是el-table-column标签里设置的属性，放在div里就不是那个属性了，简单来说就是div中的prop和label与el-table-column没关联起来