vue、element实现表格表头纵向显⽰
⼤多数情况，我们的管理端都有表格展⽰数据，然⽽表格的展⽰基本都是表头横向展⽰，然后相应的数据⼀⾏⼀⾏排列在下⽅，我们先看⼀下element官⽹的el-table的样⼦：
那么我们如果想要让表头纵向展⽰该如何实现呢？怎么样？是不是发现element官⽹没有这样的⽰例，有点难搞，哈哈，接下来咱们就来现场撸纵向表格展⽰，准备好了吗？
其实原理很简单，⼀般的都是横向展⽰，先定义第⼀⾏表头，然后数据部分直接放在⼀个数组中进⾏排序就可以渲染了，那么我们根据这个思路启发⼀下：纵向表头是不是也可以如此？那当然了，我们可以先定义⼀个纵向的表头，再按照⼀列⼀列来进⾏渲染表格数据，那么按照列来写表头，我们就可以使⽤table来进⾏了
我们先来处理表头：
<table width="100%">
<tr><td class="black_title">对⽐项</td></tr>
<tr><td class="left_title bottom_border">表头1</td></tr>
<tr><td class="left_title bottom_border">表头2</td></tr>
<tr><td class="left_title bottom_border">表头3</td></tr>
<tr><td class="left_title bottom_border">表头4</td></tr>
<tr><td class="left_title bottom_border">表头5</td></tr>
<tr><td class="left_title bottom_border">表头6</td></tr>
<tr><td class="left_title bottom_border">表头7</td></tr>
<tr><td class="left_title bottom_border">表头8</td></tr>
<tr><td class="left_title bottom_border">表头9</td></tr>
<tr><td class="left_title bottom_border">表头10</td></tr>
<tr><td class="left_title bottom_border">。。。</td></tr>
</table>
其中我们只需要设置好每个单元格的样式，然后我们就可以复制这样的table了，只不过我们可以根据我们的数据来动态添加table
<div v-for="(item, index) in tableData" :key="index">
<table width="100%">
<tr><td class="black_title">{{item.val1}}</td></tr>
<tr><td class="td_content">{{item.val2}}</td></tr>
<tr><td class="td_content">{{item.val3}}</td></tr>
<tr><td class="td_content">{{item.val4}}</td></tr>
<tr><td class="td_content">{{item.val5}}</td></tr>
<tr><td class="td_content">{{item.val6}}</td></tr>
<tr><td class="td_content">{{item.val7}}</td></tr>
<tr><td class="time_comtent">{{item.val8}}</td></tr>htmlborder
<tr><td class="td_content">{{item.val9}}</td></tr>
<tr><td class="td_content">{{item.val10}}</td></tr>
<tr><td class="td_content">{{item.val11}}</td></tr>
</table>
</div>
主体思路已经OK了，那么 这样就能够说可以达到要求吗？不⾏的，我们还得加上样式上的要求
那么这⾥我推荐使⽤flex布局，不是很清楚flex布局的可以先移步相关百度flex布局样式介绍。我们可以
这样来⼀个思路，⽐如定义⼀个⼤的div⽤来装我们需要展⽰的表格，然后div⾥⾯⼀列就是⼀个table也⽤div进⾏包裹，那么⽤上flex布局就可以动态摆放这些div达到我们想要的效果：
<div class="" >
<div >
<table width="100%">
//这⾥是表头的table
</table>
</div>
<div v-for="(item, index) in tableData" :key="index" :>
<table width="100%">
//这⾥是内容的table
</table>
</div>
</div>
当然我这⾥⾃⼰样式的css有进⾏设置，⼤家可根据⾃⾝要求进⾏设置，也可以加⼀些el-button和点击事件的元素在⾥⾯
头部纵向展⽰有⼀个缺点：不能有太多数据进⾏展⽰对⽐，只能⽤于少数数据展⽰对⽐，不过这样看上去数据对⽐也会更明显
怎么样？是不是看完之后也想⾃⼰动⼿实现啊？其实还是蛮简单的对吧，go & di it!

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。