大良商城網(wǎng)站建設(shè)b站推廣在哪里
一.思路
- 首先我們肯定得循環(huán)表頭,我們原生js封裝的表格的實現(xiàn)原理就是這樣。
- 其次我們要把自己循環(huán)的label顯示出來,對應(yīng)的prop也要和表格數(shù)據(jù)相對應(yīng)。
- 用div標(biāo)簽循環(huán)都會出現(xiàn)錯誤(div里面套column),大家不要踩坑。第一項會跑到最后一項,去掉div即可。
二.代碼
// html部分 用template循環(huán)也可以
<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數(shù)據(jù)格式
data () {return {cols: [{label: "姓名",prop: 'name'},{label: "年齡",prop: 'age'},{label: "身高",prop: 'clas'},{label: "職業(yè)",prop: 'job'},{label: "工作經(jīng)歷",prop: "jobs"}],tableData: [{'name': "禹寶寶","age": "18","clas": "185","job": "三目運(yùn)算符創(chuàng)始人","jobs": "vue4.0突出貢獻(xiàn)者"}]};},
三.為什么div不行
????????prop和label是cols中的屬性,也是el-table-column標(biāo)簽里設(shè)置的屬性,放在div里就不是那個屬性了,簡單來說就是div中的prop和label與el-table-column沒關(guān)聯(lián)起來