使用 Ant Design Vue 你可能会遇到的14个问题

  • 使用 Ant Design Vue 你可能会遇到的14个问题已关闭评论
  • 170 次浏览
  • A+
所属分类:Web前端
摘要

公司有一个新需求,在原来项目基础上开发,项目中使用 Ant Design Vue,版本是 1.X ,在此记录下遇到的问题;对于没有使用过或者使用程度不深的同学来说,希望可以帮助你在开发中遇到问题时有个参考。对于已经熟练使用的同学,可能这些问题都遇到过,欢迎大家在评论区补充。

公司有一个新需求,在原来项目基础上开发,项目中使用 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个问题。各位大佬有不同意见或者遇到过其他问题的可以在评论区补充;