Vue3 テーブルコンポーネントの使用

<テンプレート>
  <a-layout クラス="layout">
    <レイアウトコンテンツ
        :style="{ 背景: '#fff', パディング: '24px', 最小高さ: '280px' }">
      <div class="about">
        <h1>電子書籍管理ページ</h1>
      </div>
    </a-レイアウトコンテンツ>
  </a-レイアウト>

 
</テンプレート>

<テンプレート>
  <a-layout クラス="layout">
    <レイアウトコンテンツ
        :style="{ 背景: '#fff', パディング: '24px', 最小高さ: '280px' }">
      <a-table :columns="列"
               :data-source="ebooks1"
               :pagination="ページ区切り"
               :loading="読み込み中"
      >
        <テンプレート #cover="{ テキスト: カバー }">
          <img v-if="カバー" :src="カバー" alt="アバター"/>
        </テンプレート>
        <テンプレート #name="{ テキスト: 名前 }">
          <a>{{ テキスト }}</a>
        </テンプレート>
        <テンプレート #カスタムタイトル>

      <span>
        <smile-outlined/>
        名前
      </span>
          </テンプレート>
          <テンプレート #action="{ レコード }">
      <span>
        <a-スペースサイズ="small">
            <a-button type="primary" @click="編集(記録)">
              編集</a-button>
             <a-button type="危険">
                削除</a-button>
          </a-スペース>
      </span>
          </テンプレート>
      </a-テーブル>
    </a-レイアウトコンテンツ>
  </a-レイアウト>

</テンプレート>
<script lang="ts">
'@ant-design/icons-vue' から {SmileOutlined、DownOutlined} をインポートします。
'vue' から {defineComponent、onMounted、reactive、ref、toRef} をインポートします。
'axios' から axios をインポートします。

エクスポートデフォルトdefineComponent({
  名前: 'AdminEbook',
  設定（） {
    const ページネーション = {
      onChange: (ページ: 番号) => {
        console.log(ページ);
      },
      ページサイズ: 3,
    };

    const ロード = ref(false);
    定数列 = [
      {
        タイトル: 「カバー」、
        データインデックス: 'カバー',
        スロット: {customRender: 'cover'}
      },
      {
        タイトル: '名前',
        データインデックス: '名前'
      },
      {
        タイトル:「分類1」、
        データインデックス: 'category1Id',
        キー: 'category1Id',
      },
      {
        タイトル:「分類2」
        データインデックス: 'category2Id',
        キー: 'category2Id',
      },
      {
        タイトル: 「文書数」
        データインデックス: 'docCount'
      },
      {
        タイトル: 「読書番号」
        データインデックス: 'viewCount'
      },
      {
        タイトル: 「いいね数」
        データインデックス: 'voteCount'
      },
      {
        タイトル: 「アクション」
        キー: 'アクション'、
        スロット: {customRender: 'action'}
      }
    ];
    //データバインディングにはrefを使用します。const ebooks = ref();
    // リアクティブデータバインディングを使用する const ebooks1 = reactive({books: []})
    マウント時(() => {
      axios.get("/ebook/list?name=").then(応答 => {
        定数データ = レスポンス.データ;
        ebooks.value = データコンテンツ;
        ebooks1.books = データコンテンツ;
      })
    })
    戻る {
      ページネーション、
      読み込み中、
      列、
      電子書籍1: 電子書籍、
      ebooks2: toRef(ebooks1, "書籍")
    }
  },
  コンポーネント:
    スマイルアウトライン、
    下向きのアウトライン、
  },
});
</スクリプト>
<スタイルスコープ>
画像 {
  幅: 50px;
  高さ: 50px;
}
</スタイル>