在我們做項(xiàng)目中，常見的是橫向表格，但是偶爾的需求，也會做豎向的表格。比如下圖這樣的豎向表格：

我們看到這樣的效果圖，第一時(shí)間想到的是使用UI框架，改一改搞定。但是餓了么UI并沒有直接提供這樣的案例，部分同學(xué)會想著使用餓了么UI中的el-table的合并行、合并列的方式去實(shí)現(xiàn)，其實(shí)如果這樣去做的話，反而做麻煩了。比如下面的合并行合并列：

類似于這樣的效果圖，其實(shí)并不一定非得使用UI組件，有的時(shí)候使用原生的方式去做。反而會更方便。本文介紹兩種方式去實(shí)現(xiàn)這樣的簡單的豎向表格。實(shí)際場景中可能會更加復(fù)雜，但是還是那句話，只要有思路，就不是大問題。做編程，關(guān)鍵是思路：

思路就是：表格樣式自己畫，使用浮動從左往右依次排開

<template> <div id='app'> <ul class='proWrap'> <template v-for='(item, index) in data'><li :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: '售前狀態(tài)', value: '666',},{ title: '配合狀態(tài)', value: '',},{ title: '售前狀態(tài)', value: '',},{ title: '技術(shù)協(xié)議狀態(tài)', value: '',},{ title: '中標(biāo)廠家', value: '',},{ title: '配合狀態(tài)', value: '',},{ title: '配合反饋時(shí)間', 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; } } // 清除浮動，不清除會導(dǎo)致最左側(cè)的邊框消失 &::after { content: ''; display: block; clear: both; } }}// 去掉li的默認(rèn)樣式li { list-style-type: none;}</style>方式二（使用柵格布局組件）推薦

使用餓了么自帶的柵格系統(tǒng)會方便一些，我們可以如果通過控制el-col的:span屬性來設(shè)置每行出現(xiàn)幾組，多了就自動換行。至于表格的樣式，我們自己設(shè)置即可。這種方式很簡單。代碼附上：

<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: '學(xué)歷', value: '天庭弼馬溫學(xué)歷',},{ key: '能力', value: '強(qiáng)',},{ 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>

到此這篇關(guān)于vue項(xiàng)目兩種方式實(shí)現(xiàn)豎向表格的思路分析 的文章就介紹到這了,更多相關(guān)vue 豎向表格內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！