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>
到此這篇關於vue項目兩種方式實現豎向表格的思路分析 的文章就介紹到這瞭,更多相關vue 豎向表格內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！