Analysis of the ideas of implementing vertical tables in two ways in Vue project

<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 == "" ? "To be completed" : item.value }}</span>
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          title: "Importance Level",
          value: "666",
        },
        {
          title: "Pre-sale status",
          value: "666",
        },
        {
          title: "Cooperation Status",
          value: "",
        },
        {
          title: "Pre-sale status",
          value: "",
        },
        {
          title: "Technical Agreement Status",
          value: "",
        },
        {
          title: "Winning Bidder",
          value: "",
        },
        {
          title: "Cooperation Status",
          value: "",
        },
        {
          title: "Cooperation feedback time",
          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;
    // How many groups are placed in each row? Here we divide by a certain number.proItem {
      width: 100% / 3;
      float: left; // float to the 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;
      }
    }
    // Clear the float. Failure to do so will cause the leftmost border to disappear&::after {
      content: "";
      display: block;
      clear: both;
    }
  }
}
// Remove the default style of li {
  list-style-type: none;
}
</style>

<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 == "" ? "To be completed" : item.value }}</div>
      </div>
    </el-col>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableArr: [
        {
          key: "Name",
          value: "Sun Wukong",
        },
        {
          key: "age",
          value: 500,
        },
        {
          key: "Height",
          value: "As high as a mountain",
        },
        {
          key: "gender",
          value: "Male",
        },
        {
          key: "address",
          value: "Water Curtain Cave in Huaguo Mountain",
        },
        {
          key: "Education",
          value: "Tian Ting Bi Ma Wen's Educational Background",
        },
        {
          key: "capability",
          value: "Strong",
        },
        {
          key: "nickname",
          value: "The Great Sage",
        },
      ],
      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>