v-for 中el-table遍历自定义的列,嵌套显示


      
      
      
      
  1. colunmName: ['澳中线-悉尼-仓库', '澳中线-悉尼-仓库1'],
  2. totalNumber: 100,
  3. data: [{
  4. list: [
  5. {
  6. name: '澳中线-悉尼-仓库1',
  7. value: 1
  8. },
  9. {
  10. name: '澳中线-悉尼-仓库1',
  11. value: 1
  12. }
  13. ],
  14. userName: 'admin'
  15. }, {
  16. list: [
  17. {
  18. name: '澳中线-悉尼-仓库1',
  19. value: 1
  20. },
  21. {
  22. name: '澳中线-悉尼-仓库1',
  23. value: 1
  24. }
  25. ],
  26. userName: 'jason'
  27. }]

以上是数据


然后遍历数据代码


      
      
      
      
  1. <el-table
  2. :data= "data"
  3. border
  4. >
  5. <el-table-column
  6. prop= "userName"
  7. :label= "$t('user.username')"
  8. >
  9. el-table-column>
  10. <el-table-column v-for="(item, index) in colunmName" :key="index" :label="item" >
  11. <template slot-scope="scope">
  12. <span>{{scope.row.list[index].value}} span>
  13. template>
  14. el-table-column>
  15. el-table-column>
  16. <el-table-column
  17. prop= "Total"
  18. :label= "$t('ad.totalNumber')"
  19. >
  20. el-table-column>
  21. el-table>

你可能感兴趣的:(element-ui,+,vue)