vue、element实现表格表头纵向显示方式
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>
<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="" style="width:100%;display:flex;justify-content: space-between;">
<div style="width:15%;box-shadow: 0 0 2px #000;">
<table width="100%">
//这里是表头的table
</table>
</div>
<div v-for="(item, index) in tableData" :key="index" :style="'width:'+ calcWidth(tableData)+';box-shadow: 0 0 2px #000;'">
<table width="100%">
//这里是内容的table
</table>
</div>
</div>当然我这里自己样式的css有进行设置，大家可根据自身要求进行设置，也可以加一些el-button和点击事件的元素在里面
头部纵向展示有一个缺点
不能有太多数据进行展示对比，只能用于少数数据展示对比，不过这样看上去数据对比也会更明显。
怎么样？
是不是看完之后也想自己动手实现啊？
其实还是蛮简单的对吧！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue上传图片组件的编写代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要为大家详细介绍了vue简单实现转盘抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
在Vue3项目中使用VueCropper裁剪组件实现裁剪及预览效果
这篇文章主要介绍了在Vue3项目中使用VueCropper裁剪组件（裁剪及预览效果）,本文分步骤结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
组件（Component）是 Vue.js 最强大的功能之一。本文重点给大家介绍vuejs组件相关知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-09-09
在Vue中可以使用Vue.prototype向Vue的全局作用域添加属性或方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-06-06
对于中小型企业,vue应用越来越多,学习vue相对于react的成本要低点,入门相对简单。这篇文章主要给大家介绍了关于Vue接口封装的相关资料,需要的朋友可以参考下2021-05-05
状态管理也就是数据状态管理，vue应用程序的各组件之间经常需要进行通信，除了v-on、EventBus等通信方式外，可以采用数据共享的方式进行通信。这种简单的数据共享模式就是store模式。2021-05-05
这篇文章主要为大家详细介绍了在vue项目中如何使用emoji表情,包括font-awesome图标,v-emoji-picker,vue-emoji等emoji表情库,需要的可以参考下2025-03-03
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
这篇文章主要介绍了Vue通过getAction的finally来最大程度避免影响主数据呈现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-04-04
最近在做小程序开发的时候，遇到了点问题。最终选择用mpvue来做，谁知这么多坑，下面小编把我遇到的问题分享给大家，如果大家对mpvue小程序仿qq左滑置顶删除组件相关知识感兴趣的朋友一起看看吧2018-08-08
最新评论