Verwendung der Vue3-Tabellenkomponente

<Vorlage>
  <a-layout Klasse="Layout">
    <a-Layout-Inhalt
        :style="{ Hintergrund: '#fff', Polsterung: '24px', min. Höhe: '280px' }">
      <div Klasse="Über">
        <h1>E-Book-Verwaltungsseite</h1>
      </div>
    </a-layout-inhalt>
  </a-layout>

 
</Vorlage>

<Vorlage>
  <a-layout Klasse="Layout">
    <a-Layout-Inhalt
        :style="{ Hintergrund: '#fff', Polsterung: '24px', min. Höhe: '280px' }">
      <a-table :columns="Spalten"
               :Datenquelle="ebooks1"
               :pagination="Seitennummerierung"
               :wird geladen="wird geladen"
      >
        <template #cover="{ text: cover }">
          <img v-if="cover" :src="cover" alt="avatar"/>
        </Vorlage>
        <template #name="{ text: name }">
          <a>{{ text }}</a>
        </Vorlage>
        <Vorlage #benutzerdefinierterTitel>

      <span>
        <smile-outlined/>
        Name
      </span>
          </Vorlage>
          <template #action="{ Datensatz }">
      <span>
        <a-space Größe="klein">
            <a-button type="primary" @click="bearbeiten(Datensatz)">
              Bearbeiten</a-button>
             <a-button Typ="Gefahr">
                Löschen</a-button>
          </a-space>
      </span>
          </Vorlage>
      </a-Tabelle>
    </a-layout-inhalt>
  </a-layout>

</Vorlage>
<script lang="ts">
importiere {SmileOutlined, DownOutlined} aus '@ant-design/icons-vue';
importiere {defineComponent, onMounted, reactive, ref, toRef} aus „vue“;
importiere Axios von „Axios“;

exportiere StandarddefiniereKomponente({
  Name: 'AdminEbook',
  aufstellen() {
    const pagination = {
      beiÄnderung: (Seite: Nummer) => {
        console.log(Seite);
      },
      Seitengröße: 3,
    };

    const laden = ref(false);
    const Spalten = [
      {
        Titel: 'Cover',
        Datenindex: "Cover",
        Steckplätze: {customRender: 'cover'}
      },
      {
        Titel: 'Name',
        Datenindex: "Name"
      },
      {
        Titel: „Klassifikation 1“,
        Datenindex: "Kategorie1ID",
        Schlüssel: "category1Id",
      },
      {
        Titel: „Klassifikation 2“,
        Datenindex: "category2Id",
        Schlüssel: 'category2Id',
      },
      {
        Titel: 'Anzahl der Dokumente',
        Datenindex: „Dokumentenanzahl“
      },
      {
        Titel: 'Lesenummer',
        Datenindex: „Anzahl der Ansichten“
      },
      {
        Titel: 'Anzahl der Likes',
        Datenindex: "Stimmenanzahl"
      },
      {
        Titel: 'Aktion',
        Schlüssel: 'Aktion',
        Slots: {customRender: 'Aktion'}
      }
    ];
    //Verwenden Sie Ref zur Datenbindung const ebooks = ref();
    // Reaktive Datenbindung verwenden const ebooks1 = reactive({books: []})
    beimMounted(() => {
      axios.get("/ebook/list?name=").then(response => {
        const Daten = Antwort.Daten;
        ebooks.Wert = Daten.Inhalt;
        ebooks1.books = Daten.Inhalt;
      })
    })
    zurückkehren {
      Pagination,
      Laden,
      Säulen,
      ebooks1: E-Books,
      ebooks2: toRef(ebooks1, "Bücher")
    }
  },
  Komponenten:
    LächelnUmrissen,
    UntenUmrissen,
  },
});
</Skript>
<Stilbereich>
img {
  Breite: 50px;
  Höhe: 50px;
}
</Stil>