使用 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个问题。各位大佬有不同意见或者遇到过其他问题的可以在评论区补充；