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

使用 Ant Design Vue 你可能会遇到的14个问题的更多相关文章

  1. Ant Design Vue select下拉列表设置默认值

    在项目中需要为Ant Design Vue 的 select 组件设置一个默认值,如下图所示的状态下拉选择框,默认选择全部 代码如下: <a-select v-model="query ...

  2. Ant Design Vue Pro 项目实战-项目初始化(一)

    写在前面 时间真快,转眼又是新的一年.随着前后端技术的不断更新迭代,尤其是前端,在目前前后端分离开发模式这样的一个大环境下,交互性.兼容性等传统的开发模式已经显得有些吃力.之前一直用的是react,随 ...

  3. 基于Ant Design Vue封装一个表单控件

    开源代码 https://github.com/naturefwvue/nf-vue3-ant 有缺点本来是写在最后的,但是博文写的似乎有点太长了,估计大家没时间往下看,于是就把有缺点写在前面了,不喜 ...

  4. 使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换

    使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换 需求: 日历区分交易日.非交易日 可以切换面板查看整年交易日信息 可以在手动调整交易日.非交易日 演示实例 序--使用软 ...

  5. 使用npm安装 Ant Design Vue 时报错—ant-design-vue@latest(sha1-qsf / gCIFcRYxyGmOKgx7TmHf1z4 =)seems to be corrupted.

    安装 Ant Design Vue 时报错: npm install ant-design-vue --save ant-design-vue @ latest(sha1-qsf / gCIFcRYx ...

  6. Vue3学习(二)之集成Ant Design Vue

    一.集成Ant Design Vue npm install ant-design-vue@2.0.0-rc.3 --save 兼容性 Ant Design Vue 2.x 支持所有的现代浏览器. 如 ...

  7. Ant Design Vue项目解析-前言

    源码系列文章很长时间没有更新,一是在考虑文章用什么方式写质量会更高,用什么方式总结更易于扩展和总结知识点,加上工作.看书.健身占用的时间比较多所以也没时间去整理.最近在网上看到一篇文章感觉这种方式不错 ...

  8. jeecg ant design vue 一些收藏

    1关于 进来清除上次记录 找到src/permission.js下的

  9. jeecg ant design vue一级菜单跳到外部页面——例如跳到百度

    需求:点击首页跳到百度新打开的页面 找到SideMenu.vue   对应的inde.js找到renderMenuItem 函数.加一个判断 if(menu.meta.url=='https://ww ...

  10. Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件

    前言 写了个类似上篇搜索的封装,但是要考虑的东西更多. 具体业务比展示的代码要复杂,篇幅太长就不引入了. 效果图 2019-04-25 添加了下拉多选的渲染,并搜索默认过滤文本而非值 简化了渲染的子组 ...

随机推荐

  1. go web学习(四)

    跟着b站https://space.bilibili.com/361469957 杨旭老师学习做的笔记 中间件 什么是中间件 请求----> 中间件 ----> Handler 响应 &l ...

  2. mac Typora最新版逆向破解

    0x00 Typora是一款强大的markdown编辑器,它可以让你轻松地写出美观的文档.但是其一直是不开源的,而且现在也已经开始收费了.所以本着学习探索的精神去逆向看看- 0x01 众所周知Typo ...

  3. LaTeX 的学习笔记

    摘自我的洛谷博客 该文章被打开的次数(包括洛谷平台): \(\LaTeX\) 中所有命令都以\开头,后面可以跟一个花括号,代表参数. \documentclass{} 指定了文章类型,有 articl ...

  4. 使用react-test-renderer/shallow写测试

    我的项目是采用react + ts来写的,项目中要写单元测试,于是采用了Jest库,  主要用的package有 react-test-renderer react-test-renderer/sha ...

  5. centos转移mysql的数据存储目录

    前言 centos7使用yum安装mysql的时候,没修改存储位置,/var也没单独挂载,导致长时间运行后根目录空间不足.现需要将数据转移到大分区的/home,操作步骤如下. 步骤 创建新目录 mkd ...

  6. 使用MediatR和FluentValidation实现CQRS应用程序的数据验证

    本文将重点介绍如何通过MediatR的管道功能将FluentValidation集成到项目中实现验证功能. 什么是CQRS? CQRS(Command Query Responsibility Seg ...

  7. 【路由器】OpenWrt 手动编译 ipk

    目录 .ipk 文件 编译准备 编译 .ipk 文件 更新 feeds 配置平台 获取交叉编译链 添加需要编译的第三方软件包 参考资料 .ipk 文件 .ipk 文件是可以通过 OpenWrt 的包管 ...

  8. Python条件控制和循环语句(if while for )

    Python条件控制和循环语句(if while for ) 条件控制 概念:Python 条件语句是通过一条或多条语句的执行结果(True 或者 False)来决定执行的代码块 结构 1. 顺序结构 ...

  9. Burp Suite Extension Development Guide

    Burp Suite是什么? Burp Suite是一款Web应用程序渗透测试工具,可以帮助用户发现和利用Web应用程序中的漏洞,提高渗透测试的效率和精度. Web应用程序最常用的传输数据的协议就是H ...

  10. java循环自动生成简单图片

    import java.awt.*; import java.awt.font.FontRenderContext; import java.awt.geom.Rectangle2D; import ...