微信人工客服电话是多少优化设计答案五年级下册
一.思路
- 首先我们肯定得循环表头,我们原生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没关联起来