Vue3 table表格组件的使用
目录 一、Ant Design Vue1、官网地址2、怎么使用3、将电子书表格进行展示二、总结 一、Ant Design Vue 1、官网地址2、怎么使用3、将电子书表格进行展示 1、官网地址 2、怎么使用 3、将电子书表格进行展示 二、总结 一、Ant Design Vue 在大量数据需要展示时，我们一般都会以报表的形式展现，按照直觉习惯，肯定使用table表格来展示行列数据。 因此，我们要使用Ant Design Vue组件库中的table组件，来进行数据的绑定。 官网地址：https://2x.antdv.com/compon
### JavaScript源代码：Vue3 Table表格组件的使用详解
#### 一、Ant Design Vue
##### 1、官网地址
Ant Design Vue 是一个基于 Vue 的高质量 UI 组件库，提供了丰富的前端组件来帮助开发者快速构建优雅的用户界面。其官方网站位于 [https://2x.antdv.com/components/table-cn#API](https://2x.antdv.com/components/table-cn#API)，在这里你可以找到详细的文档和 API 介绍，以及各种组件的使用示例。
##### 2、怎么使用
在使用 Ant Design Vue 的 Table 组件之前，首先需要安装 Ant Design Vue 库。可以通过 npm 或 yarn 进行安装：
```bash
npm install antd-vue --save
# 或者
yarn add antd-vue
```
接着，在项目中引入并使用 Table 组件：
```javascript
import { ATable } from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
export default {
components: {
ATable,
},
data() {
return {
columns: [
// 定义列配置
{
title: '封面',
dataIndex: 'cover',
slots: { customRender: 'cover' }
},
{
title: '名称',
dataIndex: 'name'
},
// 其他列配置...
],
data: [], // 数据源
pagination: {
onChange: (page) => console.log(page),
pageSize: 3,
},
loading: false,
};
},
methods: {
fetchEbooks() {
this.loading = true;
axios.get('https://api.example.com/ebooks')
.then(response => {
this.data = response.data;
this.loading = false;
})
.catch(error => {
console.error('Failed to fetch ebooks:', error);
this.loading = false;
});
},
},
mounted() {
this.fetchEbooks();
},
};
```
##### 3、将电子书表格进行展示
为了展示电子书的数据，可以使用 Table 组件，并通过 `dataSource` 属性绑定数据源。下面是一个完整的示例代码：
```html
<template>
<a-layout class="layout">
<a-layout-content :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">
<div class="about">
<h1>电子书管理页面</h1>
</div>
<a-table :columns="columns" :data-source="data" :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 = reactive([
{
title: '封面',
dataIndex: 'cover',
slots: { customRender: 'cover' },
},
{
title: '名称',
dataIndex: 'name',
},
// 其他列配置...
]);
const data = ref([]);
const fetchEbooks = () => {
loading.value = true;
axios.get('https://api.example.com/ebooks')
.then(response => {
data.value = response.data;
loading.value = false;
})
.catch(error => {
console.error('Failed to fetch ebooks:', error);
loading.value = false;
});
};
onMounted(() => {
fetchEbooks();
});
const edit = (record) => {
console.log('Edit:', record);
};
return {
SmileOutlined,
DownOutlined,
columns,
data,
pagination,
loading,
fetchEbooks,
edit,
};
},
});
</script>
```
### 二、总结
通过以上的代码示例，我们可以看到如何使用 Ant Design Vue 的 Table 组件来展示电子书的信息。Table 组件提供了丰富的自定义选项，如自定义渲染 (`slots`)、分页 (`pagination`) 和加载状态 (`loading`) 等功能。这使得开发者可以根据实际需求灵活地调整表格的样式和交互行为，从而提升用户体验。
此外，Table 组件还支持响应式设计，可以根据屏幕大小自动调整列宽和显示效果，非常适合用于处理大量的数据展示场景。Ant Design Vue 的 Table 组件是一个强大且易用的工具，可以帮助开发者高效地实现数据展示的需求。
