在当今的前端开发领域，数据表格是展示信息的王道。Vue 3，结合其生态系统中的Ant Design Vue UI库，为开发者提供了一整套工具来构建高效、响应式的动态数据表格。本篇博客将使用Vue 3和Ant Design Vue，一步步搭建起一个从后端API获取数据并展示的动态数据表格。
一、项目背景与技术选型
为何选择Vue 3和Ant Design Vue？Vue 3以其性能的提升和新引入的Composition API而备受青睐，而Ant Design Vue则提供了一套企业级的UI组件，它们结合使用，能够快速构建高质量的数据表格。（当然，Element-Plus也是几乎一样的运用）
二、依赖安装
首先，确保您已创建Vue 3项目，并安装了Ant Design Vue依赖：
npm i --save ant-design-vue@3.2.20
或者
cnpm i ant-design-vue --save三、创建表格组件
创建一个名为DynamicTable.vue的新文件，这将是我们动态数据表格的组件。
四、后端数据准备
这里不过多赘述，主要保证接口能正确获取数据就行。
四、api层设计
index.js
/**
* 环境配置文件
* 三个环境
* 开发环境
* 测试环境
* 线上环境
*/
//env:当前环境 另外两个暂时不用管，用开发环境就行，按需设计
const env = process.env.MODE || 'develpoment';
const EnvConfig = {
develpoment:{
baseApi: "http://localhost:8088/",
},
test:{
baseApi: "/api",
},
prod:{
baseApi: "/api",
},
}
export default {
env,
...EnvConfig[env]
}
api.js
/**
* 整个项目api的管理
*
*/
import request from "./request"
export default {
getTableData(params) {
return request({
url: '/getBookListS',
method: 'get',
data: params,
})
},
}request.js
import axios from "axios";
import config from '../api/config'
//创建一个axios实例对象
const service = axios.create({
baseURL: config.baseApi,
});
// 在请求之前做一些事情
service.interceptors.request.use( (req) => {
//可以自定义header
// jwt-token认证的时候
return req;
}
);
/*
*在请求之后做一些事情
*这部分最重要，根据自己的后端数据获取来写，否则很容易出现错误
*比如方法能获取到数据但是表格内容无法显示的问题
*/
service.interceptors.response.use((response) => {
// 检查 HTTP 响应状态码
if (response.status === 200) {
console.log('请求成功，返回数据：', response.data);
return response; // 返回图书列表数组
}
});
//封装的核心函数
function request(options){
options.method = options.method || 'get'
if(options.method.toLowerCase() == 'get'){
options.params = options.data;
}
return service(options);
}
export default request;四、模板编写
在DynamicTable.vue的模板部分，我们使用a-table来构建表格的基本结构：
<template>
<a-table :columns="columns" :data-source="data">
<template #bodyCell="{ column, text }">
<template v-if="column.dataIndex === 'categoryName'">
{{ text }}
</template>
</template>
</a-table>
</template>五、脚本编写
<script>
import { defineComponent, ref, onMounted } from 'vue';
import api from "@/api/api";
// 初始数据数组
const data = ref([]);
// 表格列定义
const columns = [
{
title: '序号',
dataIndex: 'id',
},
{
title: '图书名称',
dataIndex: 'name',
},
// ...其他列定义
];
export default defineComponent({
setup() {
// const { proxy } = getCurrentInstance();
// 定义获取数据的异步函数
const getTableList = async () => {
let response = await api.getTableData();
// 另一种写法
// let response = await proxy.$api.getTableData();
// 这种写法要在setup(){}内const { proxy } = getCurrentInstance();如上
// 输入完这条语句proxy会自动导入
data.value = response; // 假设API直接返回数据数组
};
// 组件挂载后调用getTableList
onMounted(() => {
getTableList();
});
// 返回响应式数据供模板使用
return {
columns,
data,
};
},
});
</script>六、表格列定义详解
在上述脚本中，columns数组定义了表格的列头和数据索引。每个对象包含title和dataIndex属性，分别表示列头显示的文字和从数据源中对应的键。
七、数据获取与响应式更新
getTableList函数通过调用API接口获取数据，并将获取到的数据赋值给data.value，利用Vue 3的响应式系统，这将自动更新模板中的表格显示。
八、调试与测试
在开发过程中，使用console.log输出数据，检查网络请求是否成功，响应数据是否符合预期。
九、结论与进一步探索
通过本教程，我们已经成功创建了一个基本的动态数据表格。这只是一个起点，您可以根据需要添加更多功能，如分页、排序、筛选等。
