問題描述

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

我們看到這樣的效果圖，第一時間想到的是使用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>http://www.cppcns.com;{{ 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: "技術協議狀態",{
          http://www.cppcns.comtitle: "中標廠家",{
          title: "配合反饋時間",],};
  },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,};
</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-bo程式設計客棧ttom: 1px solid #e9e9e9;
      color: #b0b0b2;
      font-size: 14px;
    }
  }
}
</style>

到此這篇關於vue專案兩種方式實現豎向表格的思路分析 的程式設計客棧文章就介紹到這了,更多相關vue 豎向表格內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！