v-for 中el-table遍歷自定義的列,巢狀顯示
阿新 • • 發佈:2019-01-28
colunmName: ['澳中線-悉尼-倉庫', '澳中線-悉尼-倉庫1'], totalNumber: 100, data: [{ list: [ { name: '澳中線-悉尼-倉庫1', value: 1 }, { name: '澳中線-悉尼-倉庫1', value: 1 } ], userName: 'admin' }, { list: [ { name: '澳中線-悉尼-倉庫1', value: 1 }, { name: '澳中線-悉尼-倉庫1', value: 1 } ], userName: 'jason' }]
以上是資料
然後遍歷資料程式碼
<el-table :data="data" border > <el-table-column prop="userName" :label="$t('user.username')" > </el-table-column> <!-- 自定義列的遍歷--> <el-table-column v-for="(item, index) in colunmName" :key="index" :label="item" > <!-- 資料的遍歷 scope.row就代表資料的每一個物件--> <template slot-scope="scope"> <span>{{scope.row.list[index].value}}</span> </template> </el-table-column> </el-table-column> <el-table-column prop="Total" :label="$t('ad.totalNumber')" > </el-table-column> </el-table>