Analyse der Ideen zur Implementierung vertikaler Tabellen auf zwei Arten im Vue-Projekt

<Vorlage>
  <div id="app">
    <ul Klasse="proWrap">
      <template v-for="(Element, Index) in Daten">
        <li Klasse="proItem" :Schlüssel="index">
          <span>{{ Artikeltitel }}</span>
          <span>{{ item.value == "" ? "Wird vervollständigt" : item.value }}</span>
        </li>
      </Vorlage>
    </ul>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      Daten: [
        {
          Titel: "Wichtigkeitsstufe",
          Wert: "666",
        },
        {
          Titel: "Vorverkaufsstatus",
          Wert: "666",
        },
        {
          Titel: "Kooperationsstatus",
          Wert: "",
        },
        {
          Titel: "Vorverkaufsstatus",
          Wert: "",
        },
        {
          Titel: „Status der technischen Vereinbarung“,
          Wert: "",
        },
        {
          Titel: "Gewinnender Bieter",
          Wert: "",
        },
        {
          Titel: "Kooperationsstatus",
          Wert: "",
        },
        {
          Titel: „Zeit für Kooperationsfeedback“,
          Wert: "",
        },
      ],
    };
  },
  Methoden: {},
};
</Skript>

<style lang="less" scoped>
#app {
  Breite: 100 %;
  Mindesthöhe: 100vh;
  Box-Größe: Rahmenbox;
  Polsterung: 50px;
  .proWrap {
    Breite: 100 %;
    Rand: 1px durchgezogen #e9e9e9;
    Rand rechts: 0;
    Rahmen unten: 0;
    // Wie viele Gruppen kommen in jede Zeile? Hier dividieren wir durch eine bestimmte Zahl.proItem {
      Breite: 100 % / 3;
      float: left; // nach links schweben,
      Spanne {
        Anzeige: Inline-Block;
        Breite: berechnet (50 % – 2 Pixel);
        Höhe: 50px;
        Zeilenhöhe: 50px;
        Textausrichtung: zentriert;
        Rahmen rechts: 1px durchgezogen #e9e9e9;
        Rahmen unten: 1px durchgezogen #e9e9e9;
      }
      span:n-tes-Kind(1) {
        Hintergrund: #fafafa;
      }
    }
    // Float löschen. Andernfalls verschwindet der äußerste linke Rand&::after {
      Inhalt: "";
      Anzeige: Block;
      klar: beides;
    }
  }
}
// Entferne den Standardstil von li {
  Listenstiltyp: keiner;
}
</Stil>

<Vorlage>
  <div id="app">
    <el-col :span="wieBreite" v-for="(Element, Index) in tableArr" :key="index">
      <div Klasse="Box">
        <div class="content1">{{ Artikel.Schlüssel }}</div>
        <div class="content2">{{ item.value == "" ? "Wird vervollständigt" : item.value }}</div>
      </div>
    </el-col>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      Tabellenanordnung: [
        {
          Schlüssel: "Name",
          Wert: "Sun Wukong",
        },
        {
          Schlüssel: "Alter",
          Wert: 500,
        },
        {
          Taste: "Höhe",
          Wert: "So hoch wie ein Berg",
        },
        {
          Schlüssel: "Geschlecht",
          Wert: "Männlich",
        },
        {
          Schlüssel: "Adresse",
          Wert: „Wasservorhanghöhle im Huaguo-Berg“,
        },
        {
          Schlüssel: "Bildung",
          Wert: „Bildungshintergrund von Tian Ting Bi Ma Wen“,
        },
        {
          Schlüssel: "Fähigkeit",
          Wert: "Stark",
        },
        {
          Schlüssel: "Spitzname",
          Wert: „Der große Weise“,
        },
      ],
      Breite: 8,
    };
  },
  Methoden: {},
};
</Skript>

<style lang="less" scoped>
#app {
  Breite: 100 %;
  Mindesthöhe: 100vh;
  Box-Größe: Rahmenbox;
  Polsterung: 50px;
  .Kasten {
    Breite: 100 %;
    Höhe: 40px;
    Anzeige: Flex;
    Rahmen links: 1px durchgezogen #e9e9e9;
    Rahmen oben: 1px durchgezogen #e9e9e9;
    .Inhalt1 {
      Breite: 40%;
      Höhe: 40px;
      Zeilenhöhe: 40px;
      Textausrichtung: zentriert;
      Hintergrundfarbe: #fafafa;
      Rahmen rechts: 1px durchgezogen #e9e9e9;
      Rahmen unten: 1px durchgezogen #e9e9e9;
      Farbe: #333;
      Schriftgröße: 14px;
    }
    .Inhalt2 {
      Breite: 60%;
      Höhe: 40px;
      Zeilenhöhe: 40px;
      Textausrichtung: zentriert;
      Hintergrundfarbe: #fff;
      Rahmen rechts: 1px durchgezogen #e9e9e9;
      Rahmen unten: 1px durchgezogen #e9e9e9;
      Farbe: #b0b0b2;
      Schriftgröße: 14px;
    }
  }
}
</Stil>