ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库，它其实是Ant Design的Vue实现，组件的风格与Ant Design保持同步，组件的html结构和css样式也保持一致。 用下来发现它的确称得上为数不多的完整的VUE组件库与开发方案集成项目。
本文主要目的是总结一些开发过程中比较耗时间去查找，文档中没有具体说明的常见问题，同时希望能给新上手此框架的同学提供一些参考作用。
1.Table对接后台返回数据
针对Table数据格式与后他接口返回数据格式不一致问题，修改 `@/components/table/index.js` 132行起
主要修改pageNo,pageSize,totalCount,data这字段与后台返回字段一致就OK了
result.then(r => { this.localPagination = Object.assign({}, this.localPagination, { current: r.pageNo, // 这里修改当前分页字段 total: r.totalCount, // 这里修改总记录数字段 showSizeChanger: this.showSizeChanger, pageSize: (pagination && pagination.pageSize) || this.localPagination.pageSize // 这里修改总记录数当前页数字段 }) //r.data中的data修改为返回列表字段 if (r.data.length == 0 && this.localPagination.current != 1) { this.localPagination.current-- this.loadData() return } !r.totalCount && ['auto', false].includes(this.showPagination) && (this.localPagination = false) this.localDataSource = r.data // 返回结果中的数组数据 this.localLoading = false });
2.table操作栏参数问题
在table的dataSource中指定的每一个数据中，都必须包含有name为key的对象，而显示出的数据就是相应key对应的数据，dataIndex就用来声明列数据在数据项中对应的key
然而在操作列中，我们一般需要传入不知一项数据,试了一下如下图配置dataIndex，数据并不能正确传入slot-scope中
columns: [ ... { title: '操作', dataIndex: 'id,text', key: 'id', scopedSlots: { customRender: 'operation' } }
多尝试后发现，其实只要不配置dataIndex就好了。。。slot-scope自定义一个字段，自然就拿到了整行数据
3.table分页组件展示条数
:pagination="{showTotal: total => `共${total}条`}"
4.神奇的最后一个标签隐藏问题
使用可编辑tags过程中值得注意的问题，一般删除某个tag不止是从DOM中删除这个tag，而是需要调接口修改数据，那么这时候如果选择用修改完的数据动态渲染tag列表，并且理所当然地认为动态绑定数据就不需要关心数据手动处理，问题就出现了：
假如一共有5个tag，现在删除第一个tag，并调用接口返回新数据，注意tags默认的删除操作也不是从DOM中删除这个tag，而是将这个tag设置为```display:none```!这就导致了一个很神奇的问题，此时新返回的tags数组长度已经 -1，而它仍然认为当前列表的第一个Tag是隐藏的，最后呈现的效果就是只剩3个Tag，此时再接着删除第一个tag（其实是第二个），那么就只剩1个tag了。。
<a-tag v-for="(tag, index) in Tags" :key="tag.id" :closable="tagCloseable" :afterClose="() => handleTagStatus(0,tag)" >{{ tag.name }} </a-tag>
这个问题貌似没什么好的办法，只能放弃绑定动态数据，判断接口调用成功后，再用文档中的手动操作增减数据的办法：
this.Tags = this.Tags.filter(tag => tag.id !== removeTag.id)
5.表单的各种常规操作
单独触发某个字段的校验:
this.form.validateFields(['name'], { force: true })
清除某个字段的值：
this.form.resetFields(`name`,'')
设置表单初始值：
this.form.resetFields(`name`,'')
注意：不初始化的值用undefined而非‘',否则下拉框会不显示placeholder！
自定义文件上传的action函数：
<a-upload :customRequest="upLoad"></a-upload> upLoad (info) { let file = info.file; let param = new FormData(); //创建form对象 param.append('file',file);//通过append向form对象添加数据 console.log(param.get('file')); //FormData私有类对象访问不到，可以通过get判断值是否传进去 let config = { headers:{'Content-Type':'multipart/form-data'} }; this.$http.post(url, param, config).then(res => { ... }) },
6.接口跨域携带cookie问题
做单点登录时需要在请求头中携带cookie，遇到了很坑人的问题，实际原因是对mock.js的实现不够了解。
还是在`@/src/utils/request.js`，这里创建了axios实例供全局调用，根据axios文档，**在创建** axios 实例时添加：`withCredentials: true`
const service = axios.create({ baseURL: `${process.env.VUE_APP_BASEURL}/backend`, withCredentials: true, timeout: 6000 })