Vue3學習(十一)之 table表格元件的使用
阿新 • • 發佈:2021-11-13
一、前言
大約有兩週沒學習更文,不是懶,而是沒心情,相親路屢戰屢敗,著實很影響心情。
我想這世上對我而言,最難的事,莫過於戀愛結婚了,再一次經歷了見光死
的高光時刻
。
二、又見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學習(七)之 列表介面資料展示》文章。
優秀不夠,你是否無可替代
軟體測試交流QQ群:721256703,期待你的加入!!
歡迎關注我的微信公眾號:軟體測試君