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

问题描述

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

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

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

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

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

<template>
 <div id="app">
   <ul class="proWrap">
     <template v-for="(item, index) in data">
       <li class="proItem" :key="index">
         <span>{{ item.title }}</span>
         <span>{{ item.value == "" ? "待完善" : item.value }}</span>
       </li>
     </template>
   </ul>
 </div>
</template>

<script>
export default {
 data() {
   return {
     data: [
       {
         title: "重要级别",
         value: "666",
       },
       {
         title: "售前状态",
         value: "666",
       },
       {
         title: "配合状态",
         value: "",
       },
       {
         title: "售前状态",
         value: "",
       },
       {
         title: "技术协议状态",
         value: "",
       },
       {
         title: "中标厂家",
         value: "",
       },
       {
         title: "配合状态",
         value: "",
       },
       {
         title: "配合反馈时间",
         value: "",
       },
     ],
   };
 },
 methods: {},
};
</script>

<style lang="less" scoped>
#app {
 width: 100％;
 min-height: 100vh;
 box-sizing: border-box;
 padding: 50px;
 .proWrap {
   width: 100％;
   border: 1px solid #e9e9e9;
   border-right: 0;
   border-bottom: 0;
   // 每行放几组，这里就除于几
   .proItem {
     width: 100％ / 3;
     float: left; // 向左浮动，
     span {
       display: inline-block;
       width: calc(50％ - 2px);
       height: 50px;
       line-height: 50px;
       text-align: center;
       border-right: 1px solid #e9e9e9;
       border-bottom: 1px solid #e9e9e9;
     }
     span:nth-child(1) {
       background: #fafafa;
     }
   }
   // 清除浮动，不清除会导致最左侧的边框消失
   &::after {
     content: "";
     display: block;
     clear: both;
   }
 }
}
// 去掉li的默认样式
li {
 list-style-type: none;
}
</style>

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

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

<template>
 <div id="app">
   <el-col :span="howWidth" v-for="(item, index) in tableArr" :key="index">
     <div class="box">
       <div class="content1">{{ item.key }}</div>
       <div class="content2">{{ item.value == "" ? "待完善" : item.value }}</div>
     </div>
   </el-col>
 </div>
</template>

<script>
export default {
 data() {
   return {
     tableArr: [
       {
         key: "姓名",
         value: "孙悟空",
       },
       {
         key: "年龄",
         value: 500,
       },
       {
         key: "身高",
         value: "山一样高",
       },
       {
         key: "性别",
         value: "男",
       },
       {
         key: "住址",
         value: "花果山水帘洞",
       },
       {
         key: "学历",
         value: "天庭弼马温学历",
       },
       {
         key: "能力",
         value: "强",
       },
       {
         key: "外号",
         value: "齐天大圣",
       },
     ],
     howWidth: 8,
   };
 },
 methods: {},
};
</script>

<style lang="less" scoped>
#app {
 width: 100％;
 min-height: 100vh;
 box-sizing: border-box;
 padding: 50px;
 .box {
   width: 100％;
   height: 40px;
   display: flex;
   border-left: 1px solid #e9e9e9;
   border-top: 1px solid #e9e9e9;
   .content1 {
     width: 40％;
     height: 40px;
     line-height: 40px;
     text-align: center;
     background-color: #fafafa;
     border-right: 1px solid #e9e9e9;
     border-bottom: 1px solid #e9e9e9;
     color: #333;
     font-size: 14px;
   }
   .content2 {
     width: 60％;
     height: 40px;
     line-height: 40px;
     text-align: center;
     background-color: #fff;
     border-right: 1px solid #e9e9e9;
     border-bottom: 1px solid #e9e9e9;
     color: #b0b0b2;
     font-size: 14px;
   }
 }
}
</style>

来源：https://segmentfault.com/a/1190000039832404