使用 Ant Design Vue 你可能会遇到的14个问题
公司有一个新需求，在原来项目基础上开发，项目中使用 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);
}
2、表单项的 change 函数调用 this.form.getFieldError('字段名') 拿到的是上次调用的校验结果，不是实时岀观的校验
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.js
checkPrice(rule, value, callback) {
if (value.number > 0) {
callback();
return;
}
callback('发生错误');
this.$emit('sendError',rule) //触发回调
}
// 页面中监听 sendError
this.$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
8、cannot set a form field before rendering a field associated with the value
在呈现与值关联的字段之前，无法设置表单字段
- 第一反应是添加 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个问题。各位大佬有不同意见或者遇到过其他问题的可以在评论区补充；