SHARE
TWEET

Untitled

a guest Dec 13th, 2018 58 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.     <div>
  3.         <h1>test</h1>
  4.         <table class="table table-bordered">
  5.             <tbody>
  6.             <template v-for="(group, i) in data.items">
  7.                 <template v-for="(zone, j) in group.items">
  8.                     <template v-for="(item, k) in zone.items">
  9.  
  10.                         <tr>
  11.                             <td :rowspan="groupSpan(group)" v-if="j == 0 && k == 0" >{{group.name}}</td>
  12.                             <td :rowspan="zoneSpan(zone)" v-if="k == 0">{{zone.name}}</td>
  13.                             <td>{{item.name}}</td>
  14.                             <td>{{item.count}}</td>
  15.                         </tr>
  16.                        
  17.                     </template>
  18.                 </template>
  19.             </template>
  20.             </tbody>
  21.         </table>
  22.     </div>
  23. </template>
  24.  
  25. <script>
  26.     import sum from 'lodash/sumBy';
  27.  
  28.     export default {
  29.         data() {
  30.             return {
  31.                 data: {
  32.                     "success": true,
  33.                     "items": [
  34.                          {
  35.                              name: "1A",
  36.                              items: [
  37.                                  {
  38.                                      name: "1A1",
  39.                                      items: [
  40.                                          {
  41.                                              name: "asd",
  42.                                              count: 10,
  43.                                          },
  44.                                          {
  45.                                              name: "asd",
  46.                                              count: 10,
  47.                                          },
  48.                                          {
  49.                                              name: "asd",
  50.                                              count: 10,
  51.                                          }
  52.                                          ,
  53.                                          {
  54.                                              name: "asd",
  55.                                              count: 10,
  56.                                          }
  57.                                      ]
  58.                                  },
  59.                                  {
  60.                                      name: "1A2",
  61.                                      items: [
  62.                                          {
  63.                                              name: "asd",
  64.                                              count: 10,
  65.                                          },
  66.                                          {
  67.                                              name: "asd",
  68.                                              count: 10,
  69.                                          }
  70.                                      ]
  71.                                  }
  72.                              ]
  73.  
  74.                         },
  75.                         {
  76.                             name: "1B",
  77.                             items: [
  78.                                 {
  79.                                     name: "1A1",
  80.                                     items: [
  81.                                         {
  82.                                             name: "asd",
  83.                                             count: 10,
  84.                                         },
  85.                                         {
  86.                                             name: "asd",
  87.                                             count: 10,
  88.                                         },
  89.                                         {
  90.                                             name: "asd",
  91.                                             count: 10,
  92.                                         }
  93.                                         ,
  94.                                         {
  95.                                             name: "asd",
  96.                                             count: 10,
  97.                                         }
  98.                                     ]
  99.                                 },
  100.                                 {
  101.                                     name: "1A2",
  102.                                     items: [
  103.                                         {
  104.                                             name: "asd",
  105.                                             count: 10,
  106.                                         },
  107.                                         {
  108.                                             name: "asd",
  109.                                             count: 10,
  110.                                         }
  111.                                     ]
  112.                                 }
  113.                             ]
  114.  
  115.                         }
  116.                     ]
  117.                 }
  118.             }
  119.         },
  120.         methods: {
  121.             groupSpan(group){
  122.                 return sum(group.items, function(zone){
  123.                     return zone.items.length;
  124.                 });
  125.             },
  126.             zoneSpan(zone){
  127.                 return zone.items.length;
  128.             }
  129.         }
  130.     }
  131. </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top