本文主要介绍Ant-Design-Vue快速入门指南+坑排水，有很好的参考价值，希望对大家有所帮助。如果有任何错误或不足之处，请告诉我。
目录序
该公司希望开发一个后台管理系统，并选择了charts的Ant-Design-Vue作为整个项目的UI库。但谁曾想到，隐藏的坑是一个接一个的，文档也不是很详细，所以习惯了element-ui的掘客可能适应不好，所以本文就带大家学习一下如何高效地使用Ant-Design-Vue。
1号表单组件
首先，我们来说说最常用的表单组件的正确使用姿势:
先来看官方说法:
首先，我们不建议在表单中使用双向绑定。相同的数据可能在许多地方使用。如果使用双向绑定，数据修改将同时同步到所有组件，但这不是我们想要的。当表单提交成功、失败或被确认时，您应该同步数据。如果使用非双向绑定的表单，您将对数据修改/同步拥有最大的控制权。
第二，如果不使用表单的自动验证/收集功能，也就是不使用用v-decorator修饰的组件，仍然可以使用v-model。
看了官方的建议，我们愉快地使用v-decorator来装饰输入组件。代码如下:
<a-form-item> <a-input placeholder="账号" v-decorator="['account',{rules: [{ required: true,whitespace:true,message: '请输入您的登陆账号' }]}]" /> </a-form-item>焦点:
v-decorator中的account可以理解为input的名称值，下面的{}对象可以配置验证规则、初始值等参数。需要注意的是，使用v-decorator的组件不能使用v-model，也不能设置值相关的属性，否则会报错。
V-decorator会自动将表单中的数据收集到表单对象中，所以不要忘记将以下代码添加到数据中:
form: this.$form.createForm(this)
模板上写着:
如何自定义表单验证规则
以确认密码为例:
<a-input type="passWord" v-decorator="['new_password',{rules:[{required: true,whitespace:true,message: '请输入新密码'},{validator: handlePass}]}]" /> <a-input type="password" v-decorator="['confirm_password',{rules:[{required: true,whitespace:true,message: '请重复新密码'},{validator:handleConfirmPass}]}]" />这里我们使用验证器来定制函数。
handlePass(rule, value, callback) { this.password = value; callback(); }, handleConfirmPass(rule, value, callback) { if (this.password && this.password !== value) { callback('与新密码输入不一致'); } callback(); },注意这里必须调用callback()。
这里的值是在相应的表单中输入的值，然后知道了这些，我们就可以编写自己的业务逻辑了。
效果如下:
形成回声
在编辑的时候，我们首先需要通过后端接口读取之前的数据，但是既然现在没有v-model，该怎么办呢？
可以调用form对象中的setFieldsValue直接设置后端返回的对象。如果是在mounted方法中，必须添加$nextTick，否则会抛出一个警告，说明我们在表单呈现之前就给出了数据。
代码如图所示:
图中的SetFieldsInitialValue是设置表单的初始值。如果表单中有重置按钮，则需要设置它。reset按钮调用this.form.resetFields()来重置表单。
这个setFieldsValue方法会将传入对象的键与模板中v-decorator的第一个参数进行比较，并自动设置相应的值。
提交表单
按钮加html-type = & quot；提交& quot点击后，将触发该方法。这个方法会在验证表单中所有必填项都ok后，自动帮助我们序列化表单中所有带有v-decorator修饰的组件的值和名称，我们可以直接传递给后端。
第二桌
我们的模板可以这样写:
ant-design-vue的表格带有分页。接下来我会逐一解释上图中的参数。columns是单元格信息，我们可以将其导出为数组，如下所示:
这里的标题是用户看到的文本，dataindex要和后台传递的字段一致，否则数据不会显示。其次，提供了customRender和scopedSlots两种方式自定义内容，这里用的是第一种方式，。但是值得一提的是，如果使用slot-scope方法，那么在模板中是没有定义click事件的，当你想要获取当前行的数据时，一定不能添加dataIndex属性。[
看一个scopedSlots的例子:
您可以看到，在定义上面的列时，没有数据索引添加到操作中。
让我们继续看看什么是数据源。它是您传递给表的数据。
为了简化操作，我在这里封装了一个mixin。当页面中有表时，直接混合会支持分页和拉取数据的逻辑。代码如下:
export const mixin = { data() { return { pagination: {}, data: [], }; }, methods: { handleTableChange(pagination) { const pager = {...this.pagination}; pager.current = pagination.current; this.pagination = pager; this.loadData({ page: pagination.current }); }, async loadData(params = {}) { try { const {data: table_data, total, per_page} = await this.loadMethod('flush' in params ? {page: 1} : {page: 1, ...params}); const pagination = {...this.pagination}; pagination.total = total; pagination.pageSize = per_page; 'flush' in params && (pagination.current = 1); this.data = table_data; this.pagination = pagination; } catch (e) { console.log(e); } } } };Flush用于标识是否插入或删除了新数据。如果是，我们就直接把页面重置为1，返回第一页。
我们只需要在页面上使用以下几行代码:
import { getLog } from '@/api/api'; import { mixin } from '@/mixins'; export default { name: "log", mixins: [mixin], data() { return { columns, loadMethod: getLog }; }, mounted() { this.loadData(); } };这样，其他类似的组件也可以直接重用这个逻辑。
3号旋转组件
通常在后台管理系统中，ajax请求时会出现全屏加载提示的掩膜层。做这个功能的时候想到了这个组件，然后去官方文档查了一下，看到的操作方式如下图所示:
然后粘贴到代码里，各种操作，没有反应，有时候甚至有点错误。Spin组件肯定是有引入的，但是最后没用。无奈之下，我用他的风格为Vue写了一个旋转插件:
让我们首先创建一个新的Loading.vue
<template> <div v-if="show" class="loading-container"> <div class="loading-mask"></div> <div class="loading-content"> <a-spin tip="正在加载数据中..." size="large"> </a-spin> </div> </div> </template> <script> export default { name: 'Loading', props: { show: Boolean, }, data() { return { } } } </script> <style lang="sCSS" scoped> .loading-container{ position: relative; text-align: center; z-index:9999; .loading-mask{ position: fixed; top:0; bottom:0; left:0; right:0; background-color:rgba(0,0,0,.7); } .loading-content{ position: fixed; left: 50%; top: 50%; z-index: 300; transform: translate(-50%,-50%); text-align: center; color:#fff; } } </style>然后创建新的Loading.js
import Vue from 'vue'; import loadinGComponent from './Loading.vue'; const LoadingConstructor = Vue.extend(loadingComponent); const instance = new LoadingConstructor({ el: document.createElement('div') }); instance.show = false; // 默认隐藏 const loading = { show() { // 显示方法 instance.show = true; document.body.appendChild(instance.$el); }, hide() { // 隐藏方法 instance.show = false; } }; export default { install() { if (!Vue.$loading) { Vue.$loading = loading; } Vue.mixin({ created() { this.$loading = Vue.$loading; } }); } };然后在main.js中
import loading from '@/components/Loading/loading.js'; Vue.use(loading);然后我们可以愉快地呼叫:
Vue.$loading.show();包装优化
首先是使用官方快手提供的点播加载。这里就不重复了。使用后，仍然存在以下问题:
里面的Moment.js，lodash，和dist of icon居然占用了我们500KB 空的房间，让人无法忍受。我们做什么呢
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),让我们先忽略语言包，然后看看图标是如何优化的:
我们还需要在src文件夹下添加一个icons.js文件。
//自己项目里面用到的Icon export {default as UserOutline} from '@ant-design/icons/lib/outline/UserOutline'; export {default as CloseCircleFill} from '@ant-design/icons/lib/fill/CloseCircleFill'; export {default as InfoCircleFill} from '@ant-design/icons/lib/fill/InfoCircleFill'; export {default as CheckCircleFill} from '@ant-design/icons/lib/fill/CheckCircleFill';我们还可以打开gzip压缩，使用DLL来优化我们的打包速度，这里就不赘述了。社区里有很多类似的帖子。
标签
所以前两天用ant-design-vue感觉不是很舒服，现在只能说好香。
其实习惯了这个UI库之后，你会发现表单forms的设计其实比v-model更好。以上是个人经验，希望能给大家一个参考，多支持编程网。
以上是个人经验，希望可以给大家一个参考，也希望大家多多支持www.adminjs.cn。