Ant-Design-Vue快速上⼿指南+排坑
前⾔
公司要开发⼀个后台管理系统，对于UI库的选择上选择了颜值爆表的Ant-Design-Vue作为整个项⽬UI库，但谁曾想，暗中的坑⼀个接⼀个，⽂档也不怎么详细，可能习惯了element-ui的掘友们也许不怎么好适应，本⽂NO.1 表单组件
⾸先就来说说最常⽤的Form组件的正确使⽤姿势：
先来看官⽅⼀段话述：
第⼀、我们不推荐在Form中使⽤双向绑定，同⼀份数据可能在多处使⽤，如果使⽤双向绑定，那么数据的修改会同时同步到各个组件，但这并不是我们想要的，你应该在表单提交成功或失败或确认时同步数据，使⽤⾮双向绑定的表单，你会拥有最⼤限度的控制数据看了官⽅的建议后，我们愉快的使⽤v-decorator修饰input组件，代码如下：
<a-form-item>          <a-input            placeholder="账号"            v-decorator="['account',{rules: [{ required: true,whitespace:true,message: '请输⼊您的登陆账号' }]}]"            /></a-form-item>
划重点:
v-decorator⾥的account可以理解为input的name值，后⾯{}对象可以配置校验规则，初始值等参数，这⾥需要注意的是使⽤了v-decorator的组件⽆法使⽤v-model，也⽆法设置value等与值有关的属性，否则报错
v-decorator会⾃动收集你表单⾥的数据到form对象⾥，所以别忘了在data中加上这句代码：
form: this.$ateForm(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:t 这⾥我们使⽤validator校验器⾃定义函数
handlePass(rule, value, callback) {      this.password = value;      callback();},handleConfirmPass(rule, value, callback) {      if (this.password && this.password !== value) {          callback('与新密码输⼊不⼀致');      }      callback();}，这⾥需要注意callback()必须调⽤
这⾥的value就是对应表单输⼊了的值，然后知道了这些我们就可以写我们⾃⼰的业务逻辑了
做好的效果如图：
表单回显
我们在做编辑时⾸先需要通过后端接⼝读取到之前的数据，但是因为现在没有了v-model，那么我们该怎么办？
可以调⽤form对象中的setFieldsValue把后端返回的对象直接设置上去，如果是在mounted⽅法⾥必须加上$nextTick，不然会抛出警告说我们在表单未渲染好之前给予了数据
代码如图：
图中setFieldsInitialValue是设置表单初始值，如果表单中有重置按钮，就需要设置上，重置按钮调⽤setFields()就可以重置form表单了
这个setFieldsValue⽅法会把传进去的对象的key和模板中v-decorator中的第⼀个参数⽐较，会⾃动把对应的值set进去。
提交表单
按钮加上html-type="submit"后点击会触发这个⽅法，这个⽅法校验表单中所有必填项没有问题后会⾃动帮我们把表单中所有带有v-decorator修饰的组件的值和name序列化好，我们就可以直接传给后端了。
NO.2 表格(Table)
我们的模板可以这么写：
ant-design-vue的表格⾃带分页，接下来我把上图中的参数挨个解释下，columns是单元格信息，我们可以把他导出为⼀个数组，如下图：
这⾥的title是⽤户看到的⽂字，dataIndex要和后台传过来的字段⼀致，不然数据不会显⽰出来，其次还提供了customRender和scopedSlots两种⽅式⾃定义内容，这⾥使⽤了第⼀种⽅式，但值得⼀提的是如果使⽤的是看⼀个scopedSlots使⽤的例⼦：
可以看到上⾯定义columns时给action没有加dataIndex
我们继续看dataSource是什么，他就是你给table传递的数据
rowKey可以理解为时循环时需要的key(必有)
pagination初始化⼀个空对象
scroll定义表格可以横向滚动
handleTableChange是当分页数据发⽣改变时抛出的事件
为了简化操作，我这⾥封装了⼀个mixin，当页⾯中有table时直接混⼊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: pa flush⽤于标识是否是插⼊新数据或者删除了数据，如果是我们直接把page重置为1返回第⼀页
我们在页⾯使⽤只需要以下⼏⾏代码：
import { getLog } from '@/api/api';import { mixin } from '@/mixins';export default {  name: "log",  mixins: [mixin],  data() {    return {      columns,      loadMethod: getLog    };  },  mounted() {    this.loadData();  }};
这样其他类似的组件也可以直接复⽤本逻辑。
NO.3 Spin组件
我们平时在后台管理系统中，ajax请求过程中都会出现全屏加载提⽰的遮罩层，做这个功能时我想到了这个组件，然后去官⽅⽂档查看，看到了如下图的操作⽅式：
然后粘贴到代码中，各种操作，没有任何反应，甚⾄有时候还来点⼩报错，Spin组件肯定是引⼊了，反正就是最后怎么操作都没成功，⽆奈之下，⾃⼰⽤了他的样式写了个Vue的Spin插件：
我们⾸先新建Loading.vue
<template>  <div v-if="show" class="loading-container">    <div class="loading-mask"></div>    <div cla
ss="loading-content">      <a-spin tip="正在加载数据中..." size="large">      </a-spin>    </div>  </div></template><script>export default {  name: 'Loading', 然后再新建Loading.js
import Vue from 'vue';import loadingComponent from './Loading.vue';const LoadingConstructor = d(loadingComponent);const instance = new LoadingConstructor({  el: ateElement('div')});instance.show = false; // 默认隐藏const loading = {  s 然后在main.js中
import loading from '@/components/Loading/loading.js';Vue.use(loading);
然后我们就可以愉快的调⽤了：
Vue.$loading.show();
打包优化
⾸先就是⽤官⽅快速上⼿中提供的按需加载，这⾥不再赘述，使⽤之后还存在以下问题：
⾥⾯的moment.js，还有lodash，还有icon的dist居然占⽤了我们500KB的空间，这不能忍，那怎么办呢？
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
我们⾸先忽略掉语⾔包，然后看看图标怎么优化：
我们还需要在src⽂件夹下⾯加⼀个⽂件 icons.js
antdesign教程
//⾃⼰项⽬⾥⾯⽤到的Iconexport {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'我们还可以开启gzip压缩等，使⽤DLL优化我们的打包速度，这些在这⾥就不再赘述了，社区有很多类似的贴⼦。
结语
那么对于ant-design-vue使⽤的前两天感觉不怎么顺⼿，现在只能说真⾹
其实这个UI库⽤习惯之后会发现好像Form表单的设计其实⽐v-model更好⽤，哈哈，
觉得不错的可以点波关注

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。