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

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

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

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

<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: '售前狀態', 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 豎向表格內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！