大多数情况，我们的管理端都有表格展示数据，然而表格的展示基本都是表头横向展示，然后相应的数据一行一行排列在下方，我们先看一下element官网的el-table的样子：
那么我们如果想要让表头纵向展示该如何实现呢？怎么样？是不是发现element官网没有这样的示例，有点难搞，哈哈，接下来咱们就来现场撸纵向表格展示，准备好了吗？
其实原理很简单，一般的都是横向展示，先定义第一行表头，然后数据部分直接放在一个数组中进行排序就可以渲染了，那么我们根据这个思路启发一下：纵向表头是不是也可以如此？那当然了，我们可以先定义一个纵向的表头，再按照一列一列来进行渲染表格数据，那么按照列来写表头，我们就可以使用table来进行了
我们先来处理表头：
对比项
表头1
表头2
表头3
表头4
表头5
表头6
表头7
表头8
表头9
表头10
。。。
其中我们只需要设置好每个单元格的样式，然后我们就可以复制这样的table了，只不过我们可以根据我们的数据来动态添加table
{{item.val1}}
{{item.val2}}
{{item.val3}}
{{item.val4}}
{{item.val5}}
{{item.val6}}
{{item.val7}}
{{item.val8}}
{{item.val9}}
{{item.val10}}
{{item.val11}}主体思路已经OK了，那么 这样就能够说可以达到要求吗？不行的，我们还得加上样式上的要求！！！
那么这里我推荐使用flex布局，不是很清楚flex布局的可以先移步相关百度flex布局样式介绍。我们可以这样来一个思路，比如定义一个大的div用来装我们需要展示的表格，然后div里面一列就是一个table也用div进行包裹，那么用上flex布局就可以动态摆放这些div达到我们想要的效果：
//这里是表头的table
//这里是内容的table当然我这里自己样式的css有进行设置，大家可根据自身要求进行设置，也可以加一些el-button和点击事件的元素在里面
头部纵向展示有一个缺点：不能有太多数据进行展示对比，只能用于少数数据展示对比，不过这样看上去数据对比也会更明显
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
