Ant-Design-Vue快速上手指南+排坑

爪哇爪巴

于 2024-09-02 16:05:56 发布

阅读量416

点赞数 10

文章标签： anti-design-vue vue.js javascript

本文链接：https://blog.csdn.net/2301_80873677/article/details/141679963

版权

Ant Design Vue 是一个基于 Vue.js 的 UI 组件库，它提供了丰富的高质量组件，可以帮助开发者快速构建美观、易用的用户界面。

一、安装与引入

安装

使用 npm 安装：npm install ant-design-vue --save
使用 yarn 安装：yarn add ant-design-vue

引入

全局引入：在项目的入口文件（如 main.js）中引入 Ant Design Vue 的样式和组件
按需引入：借助 babel-plugin-import 插件实现按需引入，减少打包体积
   import Vue from 'vue';
   import Antd from 'ant-design-vue';
   import 'ant-design-vue/dist/antd.css';

   Vue.use(Antd);

二、使用组件

按钮组件
- 基本用法：

   <a-button type="primary">Primary Button</a-button>

不同类型的按钮：Ant Design Vue 提供了多种类型的按钮，如主按钮（primary）、默认按钮（default）、虚线按钮（dashed）、危险按钮（danger）等。

   <a-button>Default Button</a-button>
   <a-button type="dashed">Dashed Button</a-button>
   <a-button type="danger">Danger Button</a-button>

表单组件
- 表单验证：Ant Design Vue 的表单组件支持强大的验证功能。可以通过设置 rules 属性来定义表单字段的验证规则。

   <a-form :model="formData" :rules="formRules">
     <a-form-item label="Username" prop="username">
       <a-input v-model="formData.username" />
     </a-form-item>
     <a-form-item>
       <a-button type="primary" @click="submitForm">Submit</a-button>
     </a-form-item>
   </a-form>

   export default {
     data() {
       return {
         formData: {
           username: ''
         },
         formRules: {
           username: [
             { required: true, message: 'Please enter your username' }
           ]
         }
       };
     },
     methods: {
       submitForm() {
         this.$refs.form.validate((valid) => {
           if (valid) {
             // 表单验证通过，执行提交逻辑
           } else {
             // 表单验证不通过，提示用户
           }
         });
       }
     }
   };

表格组件

基本表格

<a-table :columns="columns" :dataSource="dataSource" />

   export default {
     data() {
       return {
         columns: [
           {
             title: 'Name',
             dataIndex: 'name'
           },
           {
             title: 'Age',
             dataIndex: 'age'
           }
         ],
         dataSource: [
           { name: 'John', age: 25 },
           { name: 'Jane', age: 30 }
         ]
       };
     }
   };

三、排坑建议

样式覆盖问题

Ant Design Vue 的样式可能会被项目中的其他样式影响。如果需要覆盖 Ant Design Vue 的样式，可以使用更具体的选择器或者使用 !important。
也可以使用 CSS 变量来定制 Ant Design Vue 的样式，避免直接覆盖样式带来的潜在问题。

表单验证错误提示不显示

确保在表单提交时正确调用了 validate 方法，并且在验证不通过时正确处理错误信息的展示。
检查 rules 属性中的验证规则是否正确设置。

按需引入组件后仍然打包了整个库

确认 babel-plugin-import 插件是否正确安装和配置。
检查是否有其他地方错误地引入了整个 Ant Design Vue 库。

表格组件数据更新不及时

如果表格的数据是通过异步请求获取的，确保在数据更新后正确地更新 dataSource 属性。
可以使用 Vue 的响应式数据机制来确保表格能够及时响应数据的变化。