【前端】table展示不固定列数据方法

前端常常会遇到不固定行列数据的情况，数据结构如下。

data:[
['head1','head2','head3','head4'],
['data1','data2','data3','data4'],
['data1','data2','data3','data4'],
['data1','data2','data3','data4'],
]

处理方法
一、传统标签方法

<div style="overflow-x:scroll">
	<table class="table" width="100%" cellspacing="0" cellpadding="0">
		<tbody>
			<tr v-for="(item,index) of data" :key="index" >
				<td v-for="(value,index) of item" :key="index" > {{value}}</td>
			</tr>
		</tbody>
	</table>
</div> 

.table {
         font-size: 14px;
         color: #333;
         font-weight: lighter;
         margin-bottom: 0;
         border-collapse: collapse;
         border:none;
         & > tbody > tr {
             border:1px solid #d3d4d6;
             &:hover {
                 background: #8cc5ff7a;
             }
         }
         & > tbody > tr > td {
             border-left:1px solid #d3d4d6;
         }
       }       

效果如下

element组件
使用element组件也可以对不固定行列进行处理，将第一行处理为head，对[1，length-1]的内容作为表格数据，如下

<div style="overflow-x:scroll">
     <el-table
             :data="format(data)"
             stripe
             align="center"
             :row-style="{fontSize: '14px', color:'#353638'}"
     >
       <el-table-column v-for="(item, index) in data[0]" :key="index" :label="item">
               <template scope="scope">
                   <span>{{scope.row[index]}}</span>
               </template>
           </el-table-column>
       </el-table>
</div>

其中format方法

private format(data: any) {
            return dataRows.slice(1, dataRows.length);
 }

效果如下

两种方式选择自己需要的场景进行运用。