box sizingvue项⽬两种⽅式实现竖向表格的思路分析
问题描述
在我们做项⽬中，常见的是横向表格，但是偶尔的需求，也会做竖向的表格。⽐如下图这样的竖向表格：
我们看到这样的效果图，第⼀时间想到的是使⽤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>
到此这篇关于vue项⽬两种⽅式实现竖向表格的思路分析的⽂章就介绍到这了，更多相关vue 竖向表格内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。