Vue3學習（十一）之 table表格組件的使用

一、前言

大約有兩週沒學習更文，不是懶，而是沒心情，相親路屢戰屢敗，着實很影響心情。

我想這世上對我而言，最難的事，莫過於戀愛結婚了，再一次經歷了見光死的高光時刻。

二、又見Ant Design Vue

在大量數據需要展示時，我們一般都會以報表的形式展現，按照直覺習慣，肯定使用table表格來展示行列數據。

因此，我們要使用Ant Design Vue組件庫中的table組件，來進行數據的綁定。

1、官網地址

官網地址：https://2x.antdv.com/components/table-cn#API

2、怎麼使用

我們先對電子書管理頁面改造，將佈局進行調整，示例代碼如下：

<template>
  <a-layout class="layout">
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">
      <div class="about">
        <h1>電子書管理頁面</h1>
      </div>
    </a-layout-content>
  </a-layout>

</template>

效果如下：

3、將電子書表格進行展示

要做的事：

• 表格渲染
• slots: 自定義渲染
• title: 表頭渲染
• customRender: 值渲染

示例代碼如下：

<template>
  <a-layout class="layout">
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">
      <a-table :columns="columns"
               :data-source="ebooks1"
               :pagination="pagination"
               :loading="loading"
      >
        <template #cover="{ text: cover }">
          <img v-if="cover" :src="cover" alt="avatar"/>
        </template>
        <template #name="{ text: name  }">
          <a>{{ text }}</a>
        </template>
        <template #customTitle>

      <span>
        <smile-outlined/>
        Name
      </span>
          </template>
          <template #action="{ record }">
      <span>
        <a-space size="small">
            <a-button type="primary" @click="edit(record)">
              編輯
            </a-button>
             <a-button type="danger">
                刪除
              </a-button>
          </a-space>
      </span>
          </template>
      </a-table>
    </a-layout-content>
  </a-layout>

</template>
<script lang="ts">
import {SmileOutlined, DownOutlined} from '@ant-design/icons-vue';
import {defineComponent, onMounted, reactive, ref, toRef} from 'vue';
import axios from 'axios';

export default defineComponent({
  name: 'AdminEbook',
  setup() {
    const pagination = {
      onChange: (page: number) => {
        console.log(page);
      },
      pageSize: 3,
    };

    const loading = ref(false);
    const columns = [
      {
        title: '封面',
        dataIndex: 'cover',
        slots: {customRender: 'cover'}
      },
      {
        title: '名稱',
        dataIndex: 'name'
      },
      {
        title: '分類一',
        dataIndex: 'category1Id',
        key: 'category1Id',
      },
      {
        title: '分類二',
        dataIndex: 'category2Id',
        key: 'category2Id',
      },
      {
        title: '文檔數',
        dataIndex: 'docCount'
      },
      {
        title: '閱讀數',
        dataIndex: 'viewCount'
      },
      {
        title: '點贊數',
        dataIndex: 'voteCount'
      },
      {
        title: 'Action',
        key: 'action',
        slots: {customRender: 'action'}
      }
    ];
    //使用ref進行數據綁定
    const ebooks = ref();
    // 使用reactive進行數據綁定
    const ebooks1 = reactive({books: []})
    onMounted(() => {
      axios.get("/ebook/list?name=").then(response => {
        const data = response.data;
        ebooks.value = data.content;
        ebooks1.books = data.content;
      })
    })
    return {
      pagination,
      loading,
      columns,
      ebooks1: ebooks,
      ebooks2: toRef(ebooks1, "books")
    }
  },
  components: {
    SmileOutlined,
    DownOutlined,
  },
});
</script>
<style scoped>
img {
  width: 50px;
  height: 50px;
}
</style>

實際效果：

三、寫在最後

對於table組件的使用不是很熟的話，需要不斷去嘗試，簡單說，就是對象屬性的映射。

總體感覺下來，還是進行數據綁定後，在進行頁面展示，如不是很清晰，請參考這篇《Vue3學習（七）之 列表界面數據展示》文章。