问题形容

在咱们做我的项目中，常见的是横向表格，然而偶然的需要，也会做竖向的表格。比方下图这样的竖向表格：

咱们看到这样的效果图，第一工夫想到的是应用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>