怎么在vue項目中實現(xiàn)一個豎向表格

怎么在vue項目中實現(xiàn)一個豎向表格？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

方式一（原生方式）不太推薦

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

<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: "售前狀態(tài)",
          value: "666",
        },
        {
          title: "配合狀態(tài)",
          value: "",
        },
        {
          title: "售前狀態(tài)",
          value: "",
        },
        {
          title: "技術(shù)協(xié)議狀態(tài)",
          value: "",
        },
        {
          title: "中標廠家",
          value: "",
        },
        {
          title: "配合狀態(tài)",
          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;
      }
    }
    // 清除浮動，不清除會導(dǎo)致最左側(cè)的邊框消失
    &::after {
      content: "";
      display: block;
      clear: both;
    }
  }
}
// 去掉li的默認樣式
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: "強",
        },
        {
          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>

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。