element ui 表格渲染慢 vue表格渲染

前段时间在工作过程中遇到了vue多表格渲染的问题，具体的需求就是在一个页面中动态渲染出多个不定长表头和内容的表格，由于自己刚接触vue不久，所以在这个把自己的解决记录下来，方便自己和有需要的人做一下参考。（注：这里我使用的是elementui的表格组件。）

---

在文章我将从最终实现效果、后台数据准备、实现思路以及代码片段等四个方面介绍：

2. 最终效果图：



3. 实现思路：

• 后台返回一个集合，集合中包含多个表格，每个表格包含两部分，动态表头数组以及动态对象表格数组；
• 渲染时，表格中动态表头信息和表格的内容分开渲染；
• 动态表头使用一个循环渲染出来即可，通过它的数量控制表格列数；而动态表格长度主要用来控制表格的行数；
• 表格中内容的获取是利用表格内容数据位置和表格头位置来定位的，即data[index][key],其中index为遍历表格内容数据是的当前行所在的索引，而key为表格头当前的内容。（这里只是为了方便测试，head直接用的中文，你也可以使用对象数组存储表头信息，key-value形式）

4. 后台数据准备：

[
	{
	"columnHead":["考核内容-1","栏目-2"],
	"columnTitle":"子实验名-1",
	"operateScore":15.0,
	"timeUsed":"23"
	"columnInfo":[
		"是否选择正确的取样工具进行取样","9",
		"是否选择正确的取样工具进行取样","9",
		"取样工具的使用方式是否正确","1",
		"观察时是否选择正确的旋钮将样品调整到合适的光线强度","1",
		"观察时是否选择正确的旋钮将样品调整到合适的对比度",
		"9","观察时是否选择正确的旋钮将样品调整到合适的清晰度","1",
		"观察时是否选择正确的旋钮将样品调整到合适的位置","8",
		"观察时是否选择正确的旋钮，调整样品的倍数","1",
		"操作总得分","87","实验操作步骤得分总计","89"
		]},
	{
	"columnHead":["实验内容-2","栏目-3","栏目-4","栏目-5"],
	"columnTitle":"子实验名-2",
	"operateScore":15.0,
	"timeUsed":"23"
	"columnInfo":[
		"是否选择正确的取样工具进行取样","9",	"是否选择正确的取样工具进行取样","9",
		"取样工具的使用方式是否正确","1",
		"观察时是否选择正确的旋钮将样品调整到合适的光线强度","1",
		"观察时是否选择正确的旋钮将样品调整到合适的对比度","9",
		"观察时是否选择正确的旋钮将样品调整到合适的清晰度","1",
		"观察时是否选择正确的旋钮将样品调整到合适的位置","8",
		"观察时是否选择正确的旋钮，调整样品的倍数","1",
		"操作总得分","87",
		"实验操作步骤得分总计","79"]
	}
]

1. 代码片段：

<el-table class="h5-table" :data="value.transformInfo">
     <el-table-column label="序号" type="index" width="180">
     </el-table-column>
     <el-table-column v-for="(key, list) in value.headers"
      :key="list" :label="key">
       <template slot-scope="scope">
		<span>
    	{{ value.transformInfo[scope.$index][key] }}
     	</span>
       </template>
     </el-table-column>
     </el-table>
       </template>
     </el-table-column>
</el-table>