公司有一个新需求，在原来项目基础上开发，项目中使用 Ant Design Vue，版本是 1.X ,在此记录下遇到的问题；对于没有使用过或者使用程度不深的同学来说，希望可以帮助你在开发中遇到问题时有个参考。对于已经熟练使用的同学，可能这些问题都遇到过，欢迎大家在评论区补充。
1、实现对下拉框显示的所有元素的搜索,包括元素的label, value等等
添加 optionFilterprop = "children",并且下拉框的每条数据不能用标签包裏,必须是纯模板标签
可以是:
<a-select option-filter-prop="children"> <a-select-option v-for-"item in countryList" :key="item.biccode" :value="item.biccode" > {{item.cname}} | {{item.biccοde}} <!-- 不能用标签包裹 --> </a-select-option> </a-select>
如果需要用标签包裹，则需要搭配 :filter-option 属性
<a-select option-filter-prop="children" :filter-option="filterOption"> <a-select-option v-for-"item in countryList" :key="item.biccode" :value="item.biccode" > <span>{{item.cname}} | {{item.biccοde}}</span> </a-select-option> </a-select>filterOption(input, option) { // option.componentOptions.children[0].elm.innerText,需要保证这一段取到选中数据的 innerText return (option.componentoptions.chi1dren[0].elm.innerText.toLowerCase().indexof(input.toLowerCase())>= 0);}
changeEquiRmbAmt(e,str){ this.form.validateFields(['field1'], (errors, values) => { console. 1og(errors) //这里拿到的是上次校验的结果 });}
解决方式一：加 setTimeout,感觉不太好（this.$nextTick()不生效）
changeEquiRmbAmt(e,str){ setTimeout(() =>{ this.form.validateFields(['field1'], (errors, values) => { console. 1og(errors) //这里拿到的是最新校验的结果 }); },10)}
解决方式二：在自定义校验器 validator 中添加回调，当栏位校验发生错误后触发回调。
<a-input v-decorator="[ 'price', { rules: [{ validator: checkPrice }], }]" />// mixins.jscheckPrice(rule, value, callback) { if (value.number > 0) { callback(); return; } callback('发生错误'); this.$emit('sendError',rule) //触发回调}// 页面中监听 sendErrorthis.$on('sendError',(rule) =>{ if(rule.field==='price'){ 执行操作 }})
3、v-decorator 模式下无法使用 computed
当一个栏位的显示隐藏，依赖多个栏位的综合结果时，通常使用 computed ；但在v-decorator 模式下无法使用类似 v-if="this.form.value1" 的写法，只能使用 this.form.getFieldValue('value1')；并且在项目页面有很多这种场景的时候，不能使用 computed 就难受了；
所以这里可以定义一个对象和 this.form 一样的 this.cloneForm
onValuesChange(props,values){ if(values){ for (const key in values){ if(values.hasOwnProperty(key)){ if(!this.cloneFonm.hasOwnProperty(key) || this.cloneForm[key]!==values[key]){ this.$set(this.cloneForm,key,values[key]) } } } // console.log(this.cloneForm) }}
这样当 form 的表单项任意值改变时，cloneForm 都能及时改变，相应的在 computed 里面也能使用 this.cloneForm
4、tabs标签页切换绑定值 activekey 变了,但没有切换过来
使用 activeKey 代替 defaultActivekеу
<a-tabs :defaultActivekеу="activeKey"></a-tabs>改为<a-tabs :activeKey="activeKey"></a-tabs>
5、输入框中输入时卡顿
给表单增加 selfUpdate 属性
<a-form :form="form" :selfUpdate="true"></a-form>
若表单中某个组件输入依旧卡顿，则可以将该组件提取出来，单独用另外的 form 包装；
6、表单校验时，控制台有显示 async-validator 返回的错误信息，但栏位上没有标红，也没有显示错误提示
在发现模板中绑定没有什么问题的话，可以检查下自定义校验函数的逻辑，可能有两种情况
- 校验函数中没有顺利走到 callback()
- 校验函数顺利走到 callback()，但后续执行代码发生错误，没有抛出错误
如果在自定义校验函数中存在语法错误，ant-design-vue 貌似默认不会抛出；此时可以用 try catch 检查下是否发生了错误。
比如下面的代码执行后就有问题，没有在 callback('请输入') 执行后 return，继续往下执行，导致所校验栏位不会标红
const check = (rule, value, callback) => { if ([undefined,'',null].includes(value)) { callback('请输入') // return ,如果希望此时校验结束，则需要添加 return } callback()};
而且，还需要注意的是，一个表单中绑定了多个自定义校验函数的话，其中一个自定义校验函数有逻辑错误，则该表单中其他栏位在执行自定义校验的时候也不会标红；
7、Invalid prop: custom validator check failed for prop “fileList“
有个场景是：上传文件后，查看详情，将详情的数据赋值给 fileList
arr.forEach((item) =>{ item.name = item.fileName})this.fileList = arr
此时报错了，原因是 fileList 未获取到对应的数据类型的数据，需要将 uid 和 status 加上
arr.forEach((item) =>{ item.name = item.fileName item.uid = item.uid item.status = item.status})this.fileList = arr
在呈现与值关联的字段之前，无法设置表单字段
- 第一反应是添加 this.$nextTick() ，但。。无效
- formItem 上添加 key，无效
- formItem 上添加 selfUpdate，无效
- 添加 setTimeout ，有效。。
难道就是渲染慢？
9、表格列设置宽度无效
以下设置无效
:scroll{x:120%}:scroll{x:'1000'}
以下设置有效
:scroll{x:'1000px'}:scroll{x:1000}:scroll{x:'120%'}
10、表单使用v-decorator模式，点击label 输入框聚焦问题解决方案
在 a-form-item 标签上添加和 v-decorator 绑定的字段名不一样的 id
<a-form-item label="Note" id="noteId" // 添加和 v-decorator 绑定的字段名不一样的 id> <a-input v-decorator="['note', { rules: [{ required: true, message: 'Please' }] }]" /> </a-form-item>
11、table表格选中项的清除问题
在 rowSelection 中需要将 selectedRowKeys 返回
<template> <a-table ref="table" :row-selection="rowSelection" :pagination="false" bordered :rowKey="(record, index) => { return index }"> </a-table></template><script> data(){ return{ selectedRows: [], selectedRowKeys: [], } }, computed:{ rowSelection(){ const { selectedRowKeys } = this; return { selectedRowKeys, // 需要加上这一行，清除才会有作用 onChange: (selectedRowKeys, selectedRows) => { this.selectedRowKeys = selectedRowKeys this.selectedRows = selectedRows }, } }, },</script>
12、调用表单清空方法后，Select组件的placeholder不显示的问题
表单清空方法中需设置值为 undefined，不能是空字符串
this.form.setFields({'feePay':{value:undefined,error:null}})
13、a-affix 固钉组件，宽度未随父容器宽度变化
设置 <a-affix> 宽度 100%
<Affix :style="{ width: '100%' }" :offset-top="10"></Affix>
14、编辑表格数据时，在输入框输入一个字符后，输入框立马失去焦点了，导致不能正常的连续输入字符
输入框所在列的 dateIndex 设置的是 remitMemo，remitMemo 具有唯一性。所以给表格的 rowKey 设置的也是 remitMemo，这里修改 rowKey 为其他具有唯一性的字段即可......
// 输入框的配置数据{ title: 'remitMemo', dataIndex: 'remitMemo', width: '30%', scopedSlots: { customRender: 'remitMemo' },}// 改为其他具有唯一性的字段<a-table rowKey="remitMemo"> => <a-table rowKey="uid">
总结
目前做的这个项目体量不算太大，但也遇到了很多问题，上面记录了和 antDesignVue 相关的14个问题。各位大佬有不同意见或者遇到过其他问题的可以在评论区补充；
经验首页