一.思路
- 首先我们肯定得循环表头，我们原生js封装的表格的实现原理就是这样。
- 其次我们要把自己循环的label显示出来，对应的prop也要和表格数据相对应。
- 用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没关联起来
