Question

我有一个嵌套数组，想在表中显示。但是，我无法正确显示嵌套数组。

我的数据集如下：

[ 
   { 
      "dd":"February",
      "md":[ 
         { "dag":"2020-02-01" },
         { "dag":"2020-02-02" },
         { "dag":"2020-02-03" }
      ]
   },
   { 
      "dd":"March",
      "md":[ 
         { "dag":"2020-03-01" },
         { "dag":"2020-03-02" },
         { "dag":"2020-03-03" }
      ]
   }
]

我想要一张看起来像这样的桌子。

|  February  |   March    |
| 2020-02-01 | 2020-03-01 |
| 2020-02-02 | 2020-03-02 |
| 2020-02-03 | 2020-03-03 |

我做了这个工作，但是它给了我2张桌子而不是一张桌子。

<template v-for="(md2, index) in md2s">  
  <table :key=index >
    <thead >
      <tr align="center">
        <th  style="width: 80px">{{md2}}</th>
      </tr>
    </thead>
    <tr v-for="(date, index) in md2.md" :key=index> 
      <td align="center" >{{date.dag }}</td>
    </tr>
  </table>
</template>

感谢所有帮助。

br。埃里克

Answer 1

您可以使用其他方式创建循环（一个表，多个列）在这种情况下，请在每个标头中填充'dd'，并在每个列中填充md元素。

var data=[ 
   { 
      "dd":"February",
      "md":[ 
         { 
            "dag":"2020-02-01"
         },
         { 
            "dag":"2020-02-02"
         },
         { 
            "dag":"2020-02-03"
         }
      ]
   },
   { 
      "dd":"March",
      "md":[ 
         { 
            "dag":"2020-03-01"
         },
         { 
            "dag":"2020-03-02"
         },
         { 
            "dag":"2020-03-03"
         }
      ]
   }
];

new Vue({
	el:'#app',
  data:{
    md2s: data
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.js"></script>
<div id=app >
<table  >
  <thead >  
         <tr align="center">
          <th v-for="(md2, index) in md2s" :key=index  style="width: 80px">{{md2.dd}}</th>
          </tr>
  </thead>
  <tbody>
    <tr  align="center">
      <td v-for="(md2, index) in md2s" :key=index style="width: 80px">
         <div v-for="(mdcol, col) in md2.md" :key=col>
         {{mdcol.dag}}
         </div> 
      </td>
    </tr>    
  </tbody>
</table>
</div>

https://jsfiddle.net/bn5g1v09/1/

Answer 2

您需要的是两个不同的迭代。一个用于标题，另一个用于表主体。对于标题，您只需要在订单上添加月份名称即可。该代码段显示了如何使用计算出的属性months。这样就完成了头迭代和第一次迭代。

第二个要复杂一些。您需要事先知道会有几行，为此，我创建了一个计算属性maxLength，该属性搜索每个md并给出较大的行。然后，针对每个行遍历每个月，然后使用v-if验证该月是否有足够的日期，以及是否确实从索引和嵌套的数据结构中查找所需的日期。恢复第二次迭代。

下面的代码段是一个工作示例，其中包含更复杂的数据，显示了使用不同md大小和自动月份排序时可能发生的情况。

var app = new Vue({
  el: '#app',
  data: () => ({
    nested: [
      { "dd": "February",
        "md": [{ "dag": "2020-02-01" },{ "dag": "2020-02-02" },{ "dag": "2020-02-03" },{ "dag": "2020-03-04" }]
      },
      { "dd": "March",
        "md": [{ "dag": "2020-03-01" },{ "dag": "2020-03-02" },{ "dag": "2020-03-03" }]
      },
      { "dd": "January",
        "md": [{ "dag": "2020-01-01" }]
      }
    ]
  }),
  computed: {
    staticMonths() {
      return Array.from(Array(12),(e,i)=>new Date(25e8*++i).toLocaleString('en-US',{month: 'long'}));
    },
    months() {
      return this.nested.map(item => item.dd).sort((a, b) => {
        const A = this.staticMonths.indexOf(a);
        const B = this.staticMonths.indexOf(b);
        return A-B;
      });
    },
    maxLength() {
      return this.nested.reduce((accum, curr) => accum > curr.md.length ? accum : curr.md.length, 0);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table>
    <thead>
      <tr>
        <th v-for="(item, index) in months">{{ item }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="index in maxLength">
        <td v-for="item in months">
          <span v-if="nested.find(nest => nest.dd === item).md.length > index-1">
            {{nested.find(nest=>nest.dd===item).md[index-1].dag}}
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Vue v-for嵌套数组

2 个答案: