Vue3中Ant-design-vue的使用-附完整代码

news2025/6/7 13:47:13

前言

首先介绍一下什么是Ant-design-vue

Ant Design Vue 是基于 Vue 3 的企业级 UI 组件库（同时兼容 Vue 2），是蚂蚁金服开源项目 Ant Design 的 Vue 实现版本。它遵循 Ant Design 的设计规范，提供丰富的组件和高质量的设计体系，适用于中后台管理系统和复杂业务场景。

官方网站：Ant Design of Vue - Ant Design Vue

目前官方最新版本：4.2.6

一、Ant-design-vue核心特性

1.设计规范统一

遵循 Ant Design 的设计语言（色彩、布局、动效等），提供专业的设计一致性。
支持 暗黑模式 和自定义主题（通过 Less 变量覆盖）。

2.丰富的组件库

包含 60+ 高质量组件，如表格、表单、弹窗、导航、数据展示等。
复杂组件支持：可编辑表格、树形控件、拖拽排序、高级表单等。

3.TypeScript 友好

使用 TypeScript 开发，提供完整的类型定义。

4.国际化支持

内置 40+ 语言包，轻松实现多语言切换。

5.响应式布局

适配不同屏幕尺寸，支持移动端和桌面端。

二、安装

我这里使用的编译器是VSCode 只需要将你的项目文件在集成终端打开输入安装指令即可

npm install ant-design-vue@4.x

下载完之后可以在 package.json中查看是否下载成功

三、使用步骤

1.引入

我们这里用到的是全局引入的方法

在main.js文件当中分别导入ant-design-vue和CSS样式

2.组件部分

我们这里以表格组件（JS版本）为例

找到表格组件切换成JS版本，复制对应代码

我这里对基础代码进行了自定义修改

<a-table :columns="columns" :data-source="date" bordered>
            <template #bodyCell="{ column, text }">
              <template v-if="column.dataIndex === 'name'">
                <a>{{ text }}</a>
              </template>
            </template>
            <template #title>人员管理信息</template>
</a-table>
<script setup>
import { Table } from '@/API/request'
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
  },
  {
    title: '性别',
    dataIndex: 'sex',
  },
  {
    title: '年龄',
    dataIndex: 'age',
  },
  {
    title: '薪资',
    dataIndex: 'Salary',
  },
];
const date = ref()
onMounted(() => {
  //表格数据获取
  Table().then((res) => {

    date.value = res.data.tableData
  })

</script>

表格的数据来自于本地JSON数据，通过Axios获取

3.JSON数据

{
    "tableData": [
        {
            "key": "1",
            "name": "张三",
            "sex": "男",
            "age": "25",
            "Salary":"1500"
        },
         {
            "key": "2",
            "name": "李四",
            "sex": "男",
            "age": "28",
            "Salary":"2500"
        },
         {
            "key": "3",
            "name": "王五",
            "sex": "男",
            "age": "22",
            "Salary":"1300"
        },
         {
            "key": "4",
            "name": "赵六",
            "sex": "男",
            "age": "29",
            "Salary":"3000"
        },
         {
            "key": "5",
            "name": "小花",
            "sex": "女",
            "age": "25",
            "Salary":"1900"
        }
        
    ]
}

4.Axios封装部分

我这里对于Axios进行了二次封装

//api.js
import axios from "axios";
const request = axios.create({
    baseURL:"http://localhost:8080/"
})
export default request

//request.js
import request from "./api";
export function Table(data){
   return request({
      url:'/js/employee.json',
      method:'GET',
      data:data
   })
}