经典之Vue 3实现动态数据表格

赫客

于 2024-07-06 01:35:56 发布

阅读量1.4k

点赞数 14

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_63254505/article/details/140220995

版权

在当今的前端开发领域，数据表格是展示信息的王道。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>