Details zur Datenanzeige der Vue3-Listenschnittstelle

Details zur Datenanzeige der Vue3-Listenschnittstelle

1. Beispiel für die Anzeige der Listenschnittstelle

Was wir jetzt tun müssen, ist, die auf der Seite eingegebenen Daten zu formatieren, d. h. dafür zu sorgen, dass sie besser aussehen.

Zuvor haben wir im Artikel „Vue3 (Teil 2) Integrieren von Ant Design Vue“ die Verwendung von Komponenten erwähnt. Für ein Front-End, das nicht sehr gut ist (und das Back-End ist auch nicht sehr gut), ist es im Sinne von „Nimm, was du brauchst“ am besten und bequemsten, das zu verwenden, was wir vorgefertigt haben.

Um es einfach auszudrücken: Suchen Sie nach vorgefertigten Komponenten von Ant Design Vue und zeigen Sie die Listendaten entsprechend dem Komponentenstil auf der Benutzeroberfläche an.

1. Wählen Sie Ihren bevorzugten Listenstil

Suchen Sie unter https://2x.antdv.com/components/list-cn nach der list und dem Stil, der Ihnen gefällt.

Wie in der folgenden Abbildung dargestellt:

2. Daten anzeigen

2.1. Komponenten werden in der Liste angezeigt

Als nächstes müssen wir nur Änderungen in home vornehmen, den Speicherort der entsprechenden Komponente suchen, den entsprechenden Code nach home kopieren und dann Änderungen vornehmen.

Der Beispielcode lautet wie folgt:

<Vorlage>
  <a-Layout>
    <a-layout-sider width="200" style="Hintergrund: #fff">
      <a-Menü
          Modus="inline"
          v-Modell:selectedKeys="selectedKeys2"
          v-Modell:openKeys="openKeys"
          :Stil="{ Höhe: '100%', Rahmen rechts: 0 }"
      >
        <a-sub-menu key="sub1">
          <Vorlage #Titel>
                <span>
                  <Benutzer-umrissen />
                  Unternavigation 1
                </span>
          </Vorlage>
          <a-menu-item key="1">Option1</a-menu-item>
          <a-menu-item key="2">Option2</a-menu-item>
          <a-menu-item key="3">Option3</a-menu-item>
          <a-menu-item key="4">Option4</a-menu-item>
        </a-Untermenü>
        <a-sub-menu key="sub2">
          <Vorlage #Titel>
                <span>
                  <laptop-umrissen />
                  Unternavigation 2
                </span>
          </Vorlage>
          <a-menu-item key="5">Option 5</a-menu-item>
          <a-menu-item key="6">Option6</a-menu-item>
          <a-menu-item key="7">Option 7</a-menu-item>
          <a-menu-item key="8">Option8</a-menu-item>
        </a-Untermenü>
        <a-sub-menu key="sub3">
          <Vorlage #Titel>
                <span>
                  <Benachrichtigung-umrissen />
                  Unternavigation 3
                </span>
          </Vorlage>
          <a-menu-item key="9">Option9</a-menu-item>
          <a-menu-item key="10">Option10</a-menu-item>
          <a-menu-item key="11">Option11</a-menu-item>
          <a-menu-item key="12">Option12</a-menu-item>
        </a-Untermenü>
      </a-Menü>
    </a-layout-sider>
    <a-list item-layout="vertikal" size="groß" :pagination="Paginierung" :data-source="listData">
      <Vorlage #Fußzeile>
        <div>
          <b>Ameise Design Vue</b>
          Fußzeilenteil
        </div>
      </Vorlage>
      <template #renderItem="{ item }">
        <a-list-item key="Artikel.Titel">
          <Vorlage #Aktionen>
          <span v-for="{ Typ, Text } in Aktionen" :key="Typ">
            <Komponente v-bind:is="Typ" style="margin-right: 8px" />
            {{ text }}
          </span>
          </Vorlage>
          <Vorlage #extra>
            <Bild
                Breite="272"
                alt="Logo"
                src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
            />
          </Vorlage>
          <a-list-item-meta :description="Artikel.Beschreibung">
            <Vorlage #Titel>
              <a :href="item.href" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" >{{ item.title }}</a>
            </Vorlage>
            <Vorlage #avatar><a-avatar :src="item.avatar" /></Vorlage>
          </a-list-item-meta>
          {{ item.inhalt }}
        </a-Listenelement>
      </Vorlage>
    </a-Liste>
  </a-layout>
</Vorlage>

<script lang="ts">
importiere { defineComponent, onMounted, ref, reactive, toRef} von „vue“;
importiere Axios von „Axios“;
importiere { StarOutlined, LikeOutlined, MessageOutlined } aus '@ant-design/icons-vue';
const listData: Datensatz<Zeichenfolge, Zeichenfolge>[] = [];

für (sei i = 0; i < 23; i++) {
  listData.push({
    href: 'https://www.antdv.com/',
    Titel: `Ant ​​Design Vue Teil ${i}`,
    Avatar: „https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png“,
    Beschreibung:
        „Ant Design, eine Designsprache für Hintergrundanwendungen, wird vom Ant UED Team weiterentwickelt.“
    Inhalt:
        „Wir liefern eine Reihe von Designprinzipien, praktischen Mustern und hochwertigen Designressourcen (Sketch und Axure), um Menschen dabei zu helfen, ihre Produktprototypen schön und effizient zu erstellen.“
  });
}

exportiere StandarddefiniereKomponente({
  Komponenten:
    SternUmrissen,
    Wie umrissen,
    MessageOutlined,
  },
  Name: "Home",
  aufstellen(){
    const pagination = {
      beiÄnderung: (Seite: Nummer) => {
        console.log(Seite);
      },
      Seitengröße: 3,
    };
    Konstante Aktionen: Datensatz<Zeichenfolge, Zeichenfolge>[] = [
      { Typ: 'StarOutlined', Text: '156' },
      { Typ: 'LikeOutlined', Text: '156' },
      { Typ: 'MessageOutlined', Text: '2' },
    ];
    console.log('einrichten');
    //Verwenden Sie ref zur Datenbindung const ebooks=ref();
    // Reaktive Datenbindung verwenden const ebooks1 = reactive({books:[]})
    beim Montieren(()=>{
      axios.get("http://localhost:8888/ebook/list?name=spring").then(response =>{
        console.log("beiMounted");
        const Daten = Antwort.Daten;
        ebooks.Wert=Daten.Inhalt;
        ebooks1.books=Daten.Inhalt;
      })
    })
    zurückkehren {
      Listendaten,
      Pagination,
      Aktionen,
      ebooks1: E-Books,
      ebooks2:toRef(ebooks1,"Bücher")
    }

  }
});
</Skript>

Um den Effekt zu sehen, kompilieren Sie ihn erneut und führen Sie ihn wie folgt aus:

2.2. Die von der Schnittstelle zurückgegebenen Daten werden in einer Liste angezeigt

Natürlich können Sie jetzt sehen, dass der von Ihnen gewünschte Listenstil erfolgreich auf der Seite angezeigt wurde, aber das ist nicht das, was ich möchte. Ich möchte, dass die von der Backend-Schnittstelle zurückgegebenen Daten hier angezeigt werden, also die Datenquelle. Als Nächstes passen wir den Home -Code erneut an.

Der Beispielcode lautet wie folgt:

<Vorlage>
  <a-Layout>
    `<a-layout-sider width="200" style="Hintergrund: #fff">
      <a-Menü
          Modus="inline"
          v-Modell:selectedKeys="selectedKeys2"
          v-Modell:openKeys="openKeys"
          :Stil="{ Höhe: '100%', Rahmen rechts: 0 }"
      >
        <a-sub-menu key="sub1">
          <Vorlage #Titel>
                <span>
                  <Benutzer-umrissen />
                  Unternavigation 1
                </span>
          </Vorlage>
          <a-menu-item key="1">Option1</a-menu-item>
          <a-menu-item key="2">Option2</a-menu-item>
          <a-menu-item key="3">Option3</a-menu-item>
          <a-menu-item key="4">Option4</a-menu-item>
        </a-Untermenü>
        <a-sub-menu key="sub2">
          <Vorlage #Titel>
                <span>
                  <laptop-umrissen />
                  Unternavigation 2
                </span>
          </Vorlage>
          <a-menu-item key="5">Option 5</a-menu-item>
          <a-menu-item key="6">Option6</a-menu-item>
          <a-menu-item key="7">Option 7</a-menu-item>
          <a-menu-item key="8">Option8</a-menu-item>
        </a-Untermenü>
        <a-sub-menu key="sub3">
          <Vorlage #Titel>
                <span>
                  <Benachrichtigung-umrissen />
                  Unternavigation 3
                </span>
          </Vorlage>
          <a-menu-item key="9">Option9</a-menu-item>
          <a-menu-item key="10">Option10</a-menu-item>
          <a-menu-item key="11">Option11</a-menu-item>
          <a-menu-item key="12">Option12</a-menu-item>
        </a-Untermenü>
      </a-Menü>
    </a-layout-sider>`
    <a-list item-layout="vertikal" size="groß" :pagination="Seitennummerierung" :data-source="ebooks1">
      <template #renderItem="{ item }">
        <a-list-item key="Artikelname">
          <Vorlage #Aktionen>
          <span v-for="{ Typ, Text } in Aktionen" :key="Typ">
            <Komponente v-bind:is="Typ" style="margin-right: 8px" />
            {{ text }}
          </span>
          </Vorlage>
          <a-list-item-meta :description="Artikel.Beschreibung">
            <Vorlage #Titel>
              <a :href="item.href" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" >{{ item.name }}</a>
            </Vorlage>
            <Vorlage #avatar><a-avatar :src="item.cover" /></Vorlage>
          </a-list-item-meta>
        </a-Listenelement>
      </Vorlage>
    </a-Liste>
  </a-layout>
</Vorlage>

<script lang="ts">
importiere { defineComponent, onMounted, ref, reactive, toRef} von „vue“;
importiere Axios von „Axios“;
importiere { StarOutlined, LikeOutlined, MessageOutlined } aus '@ant-design/icons-vue';
const listData: Datensatz<Zeichenfolge, Zeichenfolge>[] = [];

für (sei i = 0; i < 23; i++) {
  listData.push({
    href: 'https://www.antdv.com/',
    Titel: `Ant ​​Design Vue Teil ${i}`,
    Avatar: „https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png“,
    Beschreibung:
        „Ant Design, eine Designsprache für Hintergrundanwendungen, wird vom Ant UED Team weiterentwickelt.“
    Inhalt:
        „Wir liefern eine Reihe von Designprinzipien, praktischen Mustern und hochwertigen Designressourcen (Sketch und Axure), um Menschen dabei zu helfen, ihre Produktprototypen schön und effizient zu erstellen.“
  });
}

exportiere StandarddefiniereKomponente({
  Komponenten:
    SternUmrissen,
    Wie umrissen,
    MessageOutlined,
  },
  Name: "Home",
  aufstellen(){
    const pagination = {
      beiÄnderung: (Seite: Nummer) => {
        console.log(Seite);
      },
      Seitengröße: 3,
    };
    Konstante Aktionen: Datensatz<Zeichenfolge, Zeichenfolge>[] = [
      { Typ: 'StarOutlined', Text: '156' },
      { Typ: 'LikeOutlined', Text: '156' },
      { Typ: 'MessageOutlined', Text: '2' },
    ];
    console.log('einrichten');
    //Verwenden Sie ref zur Datenbindung const ebooks=ref();
    // Reaktive Datenbindung verwenden const ebooks1 = reactive({books:[]})
    beim Montieren(()=>{
      axios.get("http://localhost:8888/ebook/list?name=spring").then(response =>{
        console.log("beiMounted");
        const Daten = Antwort.Daten;
        ebooks.Wert=Daten.Inhalt;
        ebooks1.books=Daten.Inhalt;
      })
    })
    zurückkehren {
      Listendaten,
      Pagination,
      Aktionen,
      ebooks1: E-Books,
      ebooks2:toRef(ebooks1,"Bücher")
    }

  }
});
</Skript>
<Stil>
.ant-layout-sider{
  schweben: links;
}
</Stil>

Um den Effekt zu sehen, kompilieren Sie ihn erneut und führen Sie ihn wie folgt aus:

2.3 Schnittstellendatentransformation

Offensichtlich sind die Listendaten zu klein, daher habe ich die Schnittstelle so geändert, dass mehrere Daten zurückgegeben werden.

Aus service lässt sich leicht erkennen, dass wir unabhängig von der Eingabe eine fest codierte Fuzzy-Abfrage erstellen. Hier können wir sie in dynamisches SQL ändern.

Der Beispielcode lautet wie folgt:

Paket com.rongrong.wiki.service;

importiere com.rongrong.wiki.domain.EBook;
importiere com.rongrong.wiki.domain.EBookExample;
importiere com.rongrong.wiki.mapper.EBookMapper;
importiere com.rongrong.wiki.req.EBookReq;
importiere com.rongrong.wiki.resp.EBookResp;
importiere org.springframework.stereotype.Service;
importiere org.springframework.util.ObjectUtils;

importiere javax.annotation.Resource;
importiere java.util.List;

importiere statisches com.rongrong.wiki.util.CopyUtil.copyList;

/**
 * @Autor Rongrong
 * @version 1.0
 * @Beschreibung
 * @Datum 13.10.2021 23:09
 */
@Service
öffentliche Klasse EBookService {

    @Ressource
    privater EBookMapper eBookMapper;

    öffentliche Liste<EBookResp> Liste(EBookReq eBookReq) {
        EBook-Beispiel eBookExample = neues EBook-Beispiel();
        //Die Bedeutung des Codes hier ist gleichbedeutend mit dem Erstellen einer SQL-Anweisung, wobei die Bedingung EBookExample.Criteria criteria = eBookExample.createCriteria(); ist.
        //Die Wellenlinie zeigt an, dass es nicht empfohlen wird. Schauen wir uns den Quellcode an und nehmen einen Ersatz vor if(!ObjectUtils.isEmpty(eBookReq.getName())){
            Kriterien.undNameLike("%"+eBookReq.getName()+"%");
        }
        Liste<EBook> eBookList = eBookMapper.selectByExample(eBookExample);
        //Liste<EBookResp> eBookRespList = neue ArrayList<>();
        //für (EBook eBook: eBookListe) {
        // //EBookResp eBookResp = neues EBookResp();
        // ////Spring Boot‘s eigene BeanUtils schließen das Kopieren des Objekts ab// //BeanUtils.copyProperties(eBook, eBookResp);
        // //eBookResp.setId(12345L);
        // //Einzelne Kopie// EBookResp Kopie = Kopie(eBook, EBookResp.class);
        // eBookRespList.add(kopieren);
        //}
        //Liste kopieren List<EBookResp> respList = copyList(eBookList, EBookResp.class);
        Antwortliste zurückgeben;
    }
}

Zeigen Sie die von der Schnittstelle zurückgegebenen Daten wie folgt an:

2.4. Liste zeigt mehrere Daten in einer Zeile an

Die Schnittstellenänderung ist abgeschlossen. Dann müssen wir den Inhalt der Listenanzeige ändern. Ebenso finden wir die Rasterliste in der Listenliste. Wir ändern sie auch in home . Der Beispielcode lautet wie folgt:

<Vorlage>
  <a-Layout>
    `<a-layout-sider width="200" style="Hintergrund: #fff">
      <a-Menü
          Modus="inline"
          v-Modell:selectedKeys="selectedKeys2"
          v-Modell:openKeys="openKeys"
          :Stil="{ Höhe: '100%', Rahmen rechts: 0 }"
      >
        <a-sub-menu key="sub1">
          <Vorlage #Titel>
                <span>
                  <Benutzer-umrissen />
                  Unternavigation 1
                </span>
          </Vorlage>
          <a-menu-item key="1">Option1</a-menu-item>
          <a-menu-item key="2">Option2</a-menu-item>
          <a-menu-item key="3">Option3</a-menu-item>
          <a-menu-item key="4">Option4</a-menu-item>
        </a-Untermenü>
        <a-sub-menu key="sub2">
          <Vorlage #Titel>
                <span>
                  <laptop-umrissen />
                  Unternavigation 2
                </span>
          </Vorlage>
          <a-menu-item key="5">Option 5</a-menu-item>
          <a-menu-item key="6">Option6</a-menu-item>
          <a-menu-item key="7">Option 7</a-menu-item>
          <a-menu-item key="8">Option8</a-menu-item>
        </a-Untermenü>
        <a-sub-menu key="sub3">
          <Vorlage #Titel>
                <span>
                  <Benachrichtigung-umrissen />
                  Unternavigation 3
                </span>
          </Vorlage>
          <a-menu-item key="9">Option9</a-menu-item>
          <a-menu-item key="10">Option10</a-menu-item>
          <a-menu-item key="11">Option11</a-menu-item>
          <a-menu-item key="12">Option12</a-menu-item>
        </a-Untermenü>
      </a-Menü>
    </a-layout-sider>`
    <a-list item-layout="vertikal" Größe="groß"
            :grid="{ gutter: 16, column: 3 }" :data-source="ebooks1">
      <template #renderItem="{ item }">
        <a-list-item key="Artikelname">
          <Vorlage #Aktionen>
          <span v-for="{ Typ, Text } in Aktionen" :key="Typ">
            <Komponente v-bind:is="Typ" style="margin-right: 8px" />
            {{ text }}
          </span>
          </Vorlage>
          <a-list-item-meta :description="Artikel.Beschreibung">
            <Vorlage #Titel>
              <a :href="item.href" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" >{{ item.name }}</a>
            </Vorlage>
            <Vorlage #avatar><a-avatar :src="item.cover" /></Vorlage>
          </a-list-item-meta>
        </a-Listenelement>
      </Vorlage>
    </a-Liste>
  </a-layout>
</Vorlage>

<script lang="ts">
importiere { defineComponent, onMounted, ref, reactive, toRef} von „vue“;
importiere Axios von „Axios“;
importiere { StarOutlined, LikeOutlined, MessageOutlined } aus '@ant-design/icons-vue';
const listData: Datensatz<Zeichenfolge, Zeichenfolge>[] = [];

exportiere StandarddefiniereKomponente({
  Komponenten:
    SternUmrissen,
    Wie umrissen,
    MessageOutlined,
  },
  Name: "Home",
  aufstellen(){
    const pagination = {
      beiÄnderung: (Seite: Nummer) => {
        console.log(Seite);
      },
      Seitengröße: 3,
    };
    Konstante Aktionen: Datensatz<Zeichenfolge, Zeichenfolge>[] = [
      { Typ: 'StarOutlined', Text: '156' },
      { Typ: 'LikeOutlined', Text: '156' },
      { Typ: 'MessageOutlined', Text: '2' },
    ];
    console.log('einrichten');
    //Verwenden Sie ref zur Datenbindung const ebooks=ref();
    // Reaktive Datenbindung verwenden const ebooks1 = reactive({books:[]})
    beim Montieren(()=>{
      axios.get("http://localhost:8888/ebook/list?name=").then(response =>{
        console.log("beiMounted");
        const Daten = Antwort.Daten;
        ebooks.Wert=Daten.Inhalt;
        ebooks1.books=Daten.Inhalt;
      })
    })
    zurückkehren {
      Pagination,
      Aktionen,
      ebooks1: E-Books,
      ebooks2:toRef(ebooks1,"Bücher")
    }

  }
});
</Skript>
<Stil>
.ant-layout-sider{
  schweben: links;
}
</Stil>

Wissenspunkte:

  • :grid="{ gutter: 16, column: 4 }" ist für die Rasteranzeige mit einem Rasterintervall von 16 und 4 Elementen pro Zeile
  • Hier müssen wir löschen: pagination="pagination" , also die Paginierungsanzeige

Kompilieren Sie erneut und sehen Sie sich den Effekt wie folgt an:

2.5. Ändern Sie den Symbolstil vor dem Listeninhalt

Alles sieht gut aus, aber der Buchumschlag ist etwas klein und hässlich, wie unten gezeigt:

Um den Stil zu ändern, passen Sie ihn einfach auf der Startseite an. Der Beispielcode lautet wie folgt:

html
<Vorlage>
  <a-Layout>
    `<a-layout-sider width="200" style="Hintergrund: #fff">
      <a-Menü
          Modus="inline"
          v-Modell:selectedKeys="selectedKeys2"
          v-Modell:openKeys="openKeys"
          :Stil="{ Höhe: '100%', Rahmen rechts: 0 }"
      >
        <a-sub-menu key="sub1">
          <Vorlage #Titel>
                <span>
                  <Benutzer-umrissen />
                  Unternavigation 1
                </span>
          </Vorlage>
          <a-menu-item key="1">Option1</a-menu-item>
          <a-menu-item key="2">Option2</a-menu-item>
          <a-menu-item key="3">Option3</a-menu-item>
          <a-menu-item key="4">Option4</a-menu-item>
        </a-Untermenü>
        <a-sub-menu key="sub2">
          <Vorlage #Titel>
                <span>
                  <laptop-umrissen />
                  Unternavigation 2
                </span>
          </Vorlage>
          <a-menu-item key="5">Option 5</a-menu-item>
          <a-menu-item key="6">Option6</a-menu-item>
          <a-menu-item key="7">Option 7</a-menu-item>
          <a-menu-item key="8">Option8</a-menu-item>
        </a-Untermenü>
        <a-sub-menu key="sub3">
          <Vorlage #Titel>
                <span>
                  <Benachrichtigung-umrissen />
                  Unternavigation 3
                </span>
          </Vorlage>
          <a-menu-item key="9">Option9</a-menu-item>
          <a-menu-item key="10">Option10</a-menu-item>
          <a-menu-item key="11">Option11</a-menu-item>
          <a-menu-item key="12">Option12</a-menu-item>
        </a-Untermenü>
      </a-Menü>
    </a-layout-sider>`
    <a-list item-layout="vertikal" Größe="groß"
            :grid="{ gutter: 16, column: 3 }" :data-source="ebooks1">
      <template #renderItem="{ item }">
        <a-list-item key="Artikelname">
          <Vorlage #Aktionen>
          <span v-for="{ Typ, Text } in Aktionen" :key="Typ">
            <Komponente v-bind:is="Typ" style="margin-right: 8px" />
            {{ text }}
          </span>
          </Vorlage>
          <a-list-item-meta :description="Artikel.Beschreibung">
            <Vorlage #Titel>
              <a :href="item.href" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" rel="externes nofollow" >{{ item.name }}</a>
            </Vorlage>
            <Vorlage #avatar><a-avatar :src="item.cover" /></Vorlage>
          </a-list-item-meta>
        </a-Listenelement>
      </Vorlage>
    </a-Liste>
  </a-layout>
</Vorlage>

<script lang="ts">
importiere { defineComponent, onMounted, ref, reactive, toRef} von „vue“;
importiere Axios von „Axios“;
importiere { StarOutlined, LikeOutlined, MessageOutlined } aus '@ant-design/icons-vue';
const listData: Datensatz<Zeichenfolge, Zeichenfolge>[] = [];

exportiere StandarddefiniereKomponente({
  Komponenten:
    SternUmrissen,
    Wie umrissen,
    MessageOutlined,
  },
  Name: "Home",
  aufstellen(){
    const pagination = {
      beiÄnderung: (Seite: Nummer) => {
        console.log(Seite);
      },
      Seitengröße: 3,
    };
    Konstante Aktionen: Datensatz<Zeichenfolge, Zeichenfolge>[] = [
      { Typ: 'StarOutlined', Text: '156' },
      { Typ: 'LikeOutlined', Text: '156' },
      { Typ: 'MessageOutlined', Text: '2' },
    ];
    console.log('einrichten');
    //Verwenden Sie ref zur Datenbindung const ebooks=ref();
    // Reaktive Datenbindung verwenden const ebooks1 = reactive({books:[]})
    beim Montieren(()=>{
      axios.get("http://localhost:8888/ebook/list?name=").then(response =>{
        console.log("beiMounted");
        const Daten = Antwort.Daten;
        ebooks.Wert=Daten.Inhalt;
        ebooks1.books=Daten.Inhalt;
      })
    })
    zurückkehren {
      Pagination,
      Aktionen,
      ebooks1: E-Books,
      ebooks2:toRef(ebooks1,"Bücher")
    }

  }
});
</Skript>
<Stilbereich>
.ant-layout-sider{
  schweben: links;
}
.ant-avatar {
  Breite: 50px;
  Höhe: 50px;
  Zeilenhöhe: 50px;
  Randradius: 8 %;
  Rand: 5px 0;
}
</Stil>

Kompilieren Sie erneut und überprüfen Sie Folgendes:

Dies ist das Ende dieses Artikels über die Details der Datenanzeige der Vue3-Listenschnittstelle. Weitere relevante Inhalte zur Datenanzeige der Vue3-Listenschnittstelle finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Verwenden Sie Vue3 zur Datenbindung und Anzeigelistendaten

<<:  UCenter-Homepage fügt Statistikcode hinzu

>>:  Deaktivieren der Implementierungseigenschaften für Eingabetextfelder

Artikel empfehlen

Detailliertes Tutorial zur Verwendung von stimulsoft.reports.js mit vue-cli

vue-cli verwendet stimulsoft.reports.js (Tutorial...

MySQL-Optimierung: So schreiben Sie hochwertige SQL-Anweisungen

Vorwort Im Internet gibt es zahlreiche Informatio...

Entwurf und Implementierung einer kaskadierenden Dropdown-Box in Vue

Inhaltsverzeichnis 1. Datenbankdesign 2. Frontend...

MySQL Master-Slave-Prinzip und Konfigurationsdetails

MySQL Master-Slave-Konfiguration und Prinzip, zu ...

Vue verwendet Split, um die universelle Drag-and-Slide-Partitionspanel-Komponente zu kapseln

Inhaltsverzeichnis Vorwort Start Grundlegendes La...

So sammeln Sie Nginx-Protokolle mit Filebeat

Mithilfe von Nginx-Protokollen lassen sich Benutz...

Der gesamte Prozess der Aktualisierung eines Angular-Einzelprojekts auf mehrere Projekte

Inhaltsverzeichnis Vorwort Entwicklungsumgebung N...

Tutorial zur HTML-Tabellenauszeichnung (5): Farbattribut für helle Rahmen BORDERCOLORLIGHT

In einer Tabelle können Sie die Farbe des oberen ...

React implementiert die Erweiterungs- und Reduzierfunktion komplexer Suchformulare

Geben Sie der Zeit Zeit und lassen Sie die Vergan...

JavaScript zum Erreichen aller oder umgekehrter Auswahlfunktionen

In diesem Artikel wird der spezifische JavaScript...

Erfahrung im Webdesign

<br />Der Autor war früher ein Anfänger im W...

CSS-Beispielcode zum Erzielen eines kreisförmigen Fortschrittsbalkeneffekts mit Farbverlauf

Umsetzungsideen Ganz außen ist ein großer Kreis (...

Gründe und Lösungen für langsame MySQL-Abfragen, die beim Senden von Daten hängen bleiben

Weil ich ein Python-Programm geschrieben und inte...

Die Verbindung zwischen JavaScript-Konstruktoren und Prototypen

Inhaltsverzeichnis 1. Konstrukteure und Prototype...

XHTML-Einführungstutorial: Textformatierung und Sonderzeichen

<br />Dieser Abschnitt stellt die Implementi...