vue：v-for遍历二维数组做表格

<template>
  <div>
    <table cellpadding="0" cellspacing="0" class="clearfix bigTable" id='downloaddata' border="1px solid #ccc">
       <tr v-for='(item, index) in data'>
        <template v-for='items in item'>
         <template v-for='(itemss, indexs) in items'>
          <td>{{itemss}}</td>
         </template>
        </template>
       </tr>
	</table>
  </div>
</template>

<script>
   export default{
     name: "table",
     props: {
     	dataSource: []
     },
     data() {
     	return {
			data:[
				[{
					key1:"header1",
					key2:"header2",
					key3:"header3",
					key4:"header4",
					key5:"header5",
					key6:"header6",
					key7:"header7",
					key8:"header8",
					key9:"header9",
					key10:"header10"
				}],
				[{
					key1:95,
					key2:27,
					key3:31,
					key4:80,
					key5:43,
					key6:70,
					key7:28,
					key8:70,
					key9:95,
					key10:41
				}],
				[{
					key1:66,
					key2:36,
					key3:90,
					key4:59,
					key5:1,
					key6:31,
					key7:45,
					key8:58,
					key9:72,
					key10:32,
				}]
				]
      }
     },
     mounted() {
     }
   }
</script>

<style scoped>
  
</style>

data是一个包含了3条数据，把第1个条数据作为表头，后面的2条数据，根据列名（也就是key1这些）一一对应填进去，无论对象的属性叫什么名字（比如我这里随便就叫key1。。。）v-for都会遍历 。

由于我不太习惯用原生table标签，稍作改动后，使用ant design的a-row和a-col也能生成表格。

        <a-row v-for='(item, index) in sampleArray' type="flex" style="width: 100%;">
          <template v-for='items in item'>
            <template v-for='(itemss, indexs) in items'>
              <a-col :flex="width">{{itemss}}</a-col>
            </template>
          </template>
        </a-row>

参考博客：使用vue中的v-for遍历二维数组的方法_阿珊和她的猫的博客-CSDN博客_v-for遍历二维数组

vue中template的作用及使用 - 你不知道的巨蟹 - 博客园