vue项目两种方式实现竖向表格的思路分析

问题描述

在我们做项目中，常见的是横向表格，但是偶尔的需求，也会做竖向的表格。比如下图这样的竖向表格：

我们看到这样的效果图，第一时间想到的是使用UI框架，改一改搞定。但是饿了么UI并没有直接提供这样的案例，部分同学会想着使用饿了么UI中的el-table的合并行、合并列的方式去实现，其实如果这样去做的话，反而做麻烦了。比如下面的合并行合并列：

类似于这样的效果图，其实并不一定非得使用UI组件，有的时候使用原生的方式去做。反而会更方便。本文介绍两种方式去实现这样的简单的竖向表格。实际场景中可能会更加复杂，但是还是那句话，只要有思路，就不是大问题。做编程，关键是思路：

方式一（原生方式）不太推荐

思路就是：表格样式自己画，使用浮动从左往右依次排开

方式二（使用栅格布局组件）推荐

使用饿了么自带的栅格系统会方便一些，我们可以如果通过控制el-col的:span属性来设置每行出现几组，多了就自动换行。至于表格的样式，我们自己设置即可。这种方式很简单。代码附上：

到此这篇关于vue项目两种方式实现竖向表格的思路分析 的文章就介绍到这了,更多相关vue 竖向表格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！