问题形容
在咱们做我的项目中，常见的是横向表格，然而偶然的需要，也会做竖向的表格。比方下图这样的竖向表格：
咱们看到这样的效果图，第一工夫想到的是应用 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>