antd性能优化长列表
背景性能优化是永恒的话题。我们或多或少都处理过性能优化的需求， 页面的性能优化， 主要是通过减少非必要的渲染来实现。非必要的渲染， 可以是减少渲染的节点数量， 也可以是减少不必要的动画。今天要介绍的就是通过减少antd长列表的动画，来达到优化目的实用小技巧。希望大...
2024-01-10
CDN引入antd不支持主题颜色
本地环境：create-react-app 进行自定义配置webpack: 4.19.1less :4.1.1less-loader:6.0.0node v12.7.0问题：在配置webpack性能优化的时候antd采用的是cdn的方式进行加载、导致之前定制的主题颜色、全部失效、查询资料发现不能用less的样式进行覆盖，只能采取less-loader定制的方式进行加载、如图：但是升级到@6...
2024-02-08
组件库重构，支持antd 4.x
前言React 15.x 升 React 16.x 是一次内部重构，对于使用者来说，原来的使用方式仍然可用，额外加了新的功能；而Antd 3.x 升 Antd 4.x, 在我的认知范围里，可以称作是飞(po)跃(huai)性的重构, 因为以前很多写法都不兼容了，组件代码重构，使用者的代码也得重构。但这次重构解决了3.x的很多问题，比如：由于...
2024-01-10
antd中控制部分表单显示或隐藏
需求是根据一个选项选中值来判断是否显示下面内容比如 选中1后显示 一部分表单选中2后显示 一部分表单二者只能显示一个我现在是用变量控制表单的显示或隐藏结构就是<Form>{this.state.form1Show && (<div><Form.Item lable='name'>{getFieldDecorator('name', {initialValue: '',})(<Input />)}</Form.Item><Form.Item lable='城...
2024-01-10
antd多选下拉框一行展示的实现方式
我们都知道antd的select多选时，如果下拉框宽度不足，则自动浮动到下一行将下拉框撑大，但是这回影响到页面的整体布局。我们期望的效果是，下拉框只显示一行的值，超出一行的部分自动隐藏。下面有2种方案来实现这个效果。1.利用浮动原理设置下拉框的最大高度为一行的高度，然后超出的部分...
2024-01-10
antd多选下拉框一行展示的实现方式
我们都知道antd的select多选时，如果下拉框宽度不足，则自动浮动到下一行将下拉框撑大，但是这回影响到页面的整体布局。我们期望的效果是，下拉框只显示一行的值，超出一行的部分自动隐藏。下面有2种方案来实现这个效果。1.利用浮动原理设置下拉框的最大高度为一行的高度，然后超出的部分...
2024-01-10
antd 表格列宽自适应方法以及错误处理操作
当不给某列设置宽度时这一列的宽度等于: (表格宽度-有宽度列的宽度)/没有固定宽度的列的数量也就是没有设置宽度的列会平分表格中余下的宽度在antd 的表格中, 当你不设置表格滚动, 并且你给每一列设置了固定宽度, 那么他们会按照设置宽度的比例瓜分表格的宽度表格横向滚动, 序号, 权属人左定位...
2024-01-10
antd 表格列宽自适应方法以及错误处理操作
当不给某列设置宽度时这一列的宽度等于: (表格宽度-有宽度列的宽度)/没有固定宽度的列的数量也就是没有设置宽度的列会平分表格中余下的宽度在antd 的表格中, 当你不设置表格滚动, 并且你给每一列设置了固定宽度, 那么他们会按照设置宽度的比例瓜分表格的宽度表格横向滚动, 序号, 权属人左定位...
2024-01-10
antd-日历组件,前后禁止选择,只能选中间一部分的实例
antd-日历组件，前后禁止选择，只能选中间一部分：dateDisabledDate(current) { // 需求有效期的禁止选择时间 if (this.state.sailingtimeValue != null && this.state.sailingtimeValue.length != 0) { return current && (current < moment().subtract(1, 'd').add(1, "M") || current > moment(this.state...
2024-01-10
antd-日历组件,前后禁止选择,只能选中间一部分的实例
antd-日历组件，前后禁止选择，只能选中间一部分：dateDisabledDate(current) { // 需求有效期的禁止选择时间 if (this.state.sailingtimeValue != null && this.state.sailingtimeValue.length != 0) { return current && (current < moment().subtract(1, 'd').add(1, "M") || current > moment(this.state...
2024-01-10
请问antd的modal如果内容过多，需要让他变成可滚动的，有什么方法吗
问题描述使用antd的modal组件，内容过多，需要变成可滚动的，让Modal有进度条可滚动，请问有什么方法吗？问题出现的环境背景及自己尝试过哪些方法前端小白，想了一下午没想出来。麻烦各位大神给点思路。谢谢了！！！给点思路，感谢回答给个固定高度，再加个scroll-y:auto解决：className=“xxx”然后...
2024-01-10
antd vue表格中的表头columns请求后端，结果排序有问题？
问题发现antd ui一个比较纠结地方，假设表格中的表头跟数据都是要请求后端接口，当然显示起来没问题。奇怪问题就在表头json中加了排序字段，如下："sorter": "(a, b) => a.name.length - b.name.length"我们后端说给的json得有引号，不然报错。这样也导致，页面中虽然能显示排序按钮，但没有任何作用。无奈解决办法因为我们老大坚持不要走后端请求排序，非要前...
2024-02-25antd组件Upload实现自己上传的实现示例
前言在实现图片上传时，可能需要用到Upload，但是它默认的上传方式是加入图片后直接上传，如果要实现最后再一次性上传，需要自定义内容。//添加按钮的样式const uploadButton = ( <div> <Icon type="plus" /> <div className="ant-upload-text">Upload</div> </div> );<Upload //样式 className={styles['override-ant-btn']} ...
2024-01-10
VantUi upload 如何上传多个视频并且显示缩略图
<van-uploader v-model="fileList" preview-size="120px" accept="video/*" :after-read="afterRead"> <template #preview-cover="{ file }"> <video v-for="(item...
2024-03-04
antd vue 表格实现翻页记住上页得勾选
因为每一页都是去后端请求数据得所以每次都刷新，有没有思路实现记住勾选，感觉这个挺常见得，但是查了资料没有人说得彻底的。谢谢各位回答：用了antdesign，但是不是antdesign+vue，但是antd的逻辑应该是类似的。不需要处理什么东西，如果不需要拿到选中的具体内容数组去进行操作的话。rowSelection.onChange返回的selectedRowKeys就是所有选中的key。只是说...
2024-02-21
antd vue upload这个回调参数传参怎么用
@preview="handPreview"可以传额外的参数吗<template slot="upload" slot-scope="text, record"> <a-upload name="file" :multiple="true" action="/api/common/upload" :headers="headers" :value="text" v-if=...
2024-03-08
element upload这个data额外传参怎么用
我想传一个下标过去，想知道文档里的这个怎么使用//这样子传能接到，但是response, file, fileList都拿不到了，上传成功回调都不执行了<el-upload :on-success="handleEvaSuccess(Groupindex)">handleEvaSuccess(index,response, file, fileList) {console.log(response, file, fileList)},回答试试这个:on-success="(res, file)=>handl...
2024-01-10
vue3 antd validator校验防抖的问题
因为要求是输入即校验，需要调用接口，所以需要防抖因为callback已废除，必须以Promise的形式才能触发validator，一般的debounce不能满足返回Promise的需求**现在的问题是：输入框不停输入时，以下代码防抖效果有了但是因为每次输入都会把之前的那一次Promise取消掉，于是当我快速输入时，最后一次输入停了之后，其实是触发validator提示了，但是因为之前不停的在取消，...
2024-02-11
antd vue的modal组件如何与btn按钮建立对应关联？
Ant Design Vue框架的modal对话框组件，其简单型中，一般是一个btn组件对应一个a-modal;我设计一个页面有多个btn按钮，对应多个a-modal,一般采取不同名的visible响应每个btn，如果是2-3个，还好处理,如下方代码。但如果是10个以上，怎么办?不断地设置不同的响应变量吗？<template> <div> <a-button type="primary...
2024-03-01
antd vue 这里表单校验全填了为什么校验不过
症状就是，不填它会跳红字让你填，全填了，它就只走到 console.log('sub') 去掉isPhone校验就好了 请问哪里错了，谢谢<template> <div> <page-header-wrapper> <template v-slot:extra> <a-button @click="$router.go(-1)"> <a-...
2024-02-29
