antd-vue

基于Element-Ui封装公共表格组件

0项目组最近需要把老项目拆出来表格都是独立的需要重新封装公共的表格组件以下是实现逻辑以及部分截图实现逻辑是类似于antd-vue框架的写法，将columns拆出来在columns中填写相关的表头名字以及需要的逻辑如插槽移入提示
灰海·2024-02-09 00:04

前端大文件上传方案——分片上传

这里我们用的的组件是antd-vue的upload组件upload组件的自定义上传文件的方法asynccustomRequest(info){constbuffer=awaitthis.fileToBuffer
Dr-zct·2024-01-24 15:40

TreeSelect 树型选择控件 编辑回显时所选的值与展开后的数据不对应 解决方案

一、业务场景：最近在使用Vue框架和antd-vue组件库的时候，发现在做编辑回显时**TreeSelect树型选择控件**组件的选中的值能拿到，但是在下拉列表的回显位置有偏差。
打小就霸·2024-01-09 09:04

antd-vue 自定义表单验证

一、业务场景：在做表单验证的时候，组件库自带的条件无法满足多条验证的需求，这个时候需要用到自定义的验证二、具体实现步骤：IDNumber:[{required:true,message:'请输入',trigger:'change'},{validator:this.valiIDNumber,trigger:'change'},],valiIDNumber(rule,value,callback){
打小就霸·2024-01-09 09:34

antd-vue Table组件selectedRows翻页后不保留上一页已选

官方组件的onChange方法在分页重新加载数据的时候，会将selectedRows清空，所以不使用onChange的方案操作selectedRows数据，而是使用其他事件onSelect和onSelectAll来进行修改代码如下............import{STable}from'@/components'....exportdefault{....methods:{onSelectCh
NemoExpress·2023-12-23 01:19

antd-vue表格选中框操作后仍残留的问题解决

computed:{rowSelection(){return{selectedRowKeys:this.selectedRowKeys,//type:'radio',//是否为单选//selectedRowKeys:this.dataListSelectionKeys,onChange:(selectedRowKeys,selectedRows,event)=>{//selectedRowKey
F小滚石R·2023-12-18 22:00

antd-vue的date-picker限制不能选择今天之前的时间

我们在使用antd-vue的日期选择组件时，有时需要限制今天以前的日期不可选中，要怎么实现呢？
Unique·Blue·2023-11-24 03:58

Antd-Vue Upload 上传 Excel文件例子

单击或拖动文件到此区域上传//data的内容//token存放到请求头内headers:{Authorization:null}//引入vuex和token方法importstoragefrom'store'import{ACCESS_TOKEN}from'@/store/mutation-types'//vuex.js封装的内容exportconstACCESS_TOKEN='access_to
叫我小智哥哥就好·2023-11-22 01:30

antd-vue tree 选中所有相同节点以及反选取消

前言在做组织架构的时候，有一个问题，当同一个人位于多个部门，担任不同职务，这时候在部门员工树上的体现就会出现多次，这是合理的，但是当我们选人的时候，就会发现勾选了相同的人就应该全部勾选上，反之，取消亦然，这里的筛选用的是的基于ant-design-vue中a-tree的搜索功能代码，感谢这个之前用elementUI的时候也有这个需求，那时候代码写了有一些了，但还是没有弄出来，现在弃用了Elemen
小狐狸和小兔子·2023-11-01 01:55

antd-vue 的table设置x轴滚动不生效的问题解决

1、父元素或祖级元素必须有设置固定宽度或可计算的宽度，如只设置flex：1或width：100%是不可以的；2、table上添加属性:scroll="{x:true,y:490,extra:67}"
花影_62b4·2023-10-31 16:28

ANTD-Vue select组件可输入可下拉单选

ANTD-Vueselect组件可输入可下拉单选{{item}}exportdefault{name:"NewSelect",//数据源data(){return{list:["list","table"],//下拉数据列表value:"",//选择下拉列表中选项后的值(最终值)getlistLoading:false,//获取到下拉列表的数据前默认改选择器不可用};},methods:{//实现
从哪C？V到哪？·2023-10-15 19:01

解决ie11下antd-vue input的clear点击无效

需要在按需加载的文件下加上以下代码：if(!!window.ActiveXObject||'ActiveXObject'inwindow){Input.methods.handleReset=function(){this.stateValue=''this.$emit('change.value','')this.$emit('input','')this.$emit('change','')}
seaskyAlg·2023-10-15 19:28

【Bug小记】antd表格高度自适应窗口高度

过程：项目使用的antd-Vue组件，组件属性里可以设置表格的高度，通过设置固定高度，当表格高度大于y值时，就生成滚动条来固定表格的高度。
sunshine641·2023-10-12 16:20

antd-vue之table合并单元格

constrenderContent=(value)=>{constobj={children:value,attrs:{},};returnobj;};constdata=[{key:"1",name:"JohnBrown",age:32,tel:"0571-22098900",phone:18889898989,address:"NewYorkNo.1LakePark",},{key:"2",
xiaoshengjinbu·2023-10-09 11:26

Ant-Design-Vue：a-range-picker组件国际化配置

date-picker分类Antd-Vue提供了DatePicker、MonthPicker、RangePicker、WeekPicker几种类型的时间选择器，分别用于选择日期、月份、日期范围、周范围。
是席木木啊·2023-10-03 06:40

【ant-design-vue】ant-design-vue在uniapp使用时，auto-import失败报错

当我全局引用antd-vue时，开发模式下可以正常运行，却不能npmrunbuild正常打包，于是开始了漫长的踩坑……结论[email protected]是可以使用vite的auto-import插件的
少年歌行s·2023-09-16 05:02

antd-vue - - - - - select自定义渲染[封装select组件]

select自定义渲染[封装select组件]1.期望效果2.代码展示1.期望效果标签值和option展示不一致！2.代码展示官网地址:【antd-vueselect】封装的select组件：  {{label}}{{!!dept_name?`(${dept_name})`:''}}{{label}} import{searchAdmin}from'@/api/com
Dark_programmer·2023-09-14 14:21

antd-vue下拉框select搜索添加分页功能

直接上代码,其他功能可以自己加e.preventDefault()"@click="changePage(0)"style="cursor:pointer">上一页e.preventDefault()"/>{{nowPage}}/{{maxPage}}e.preventDefault()"@click="changePage(1)"style="cursor:pointer">下一页{{item[
栗子One·2023-09-14 08:19

Vue3在使用antd-vue的Modal封装子组件时，visible失效的问题

最近在使用vue3、antd-vue中的modal封装作为子组件，在@ok="handleOk"consthandleOk=()=>{context.emit("handleOk","123");};子组件点击确定
会飞的猪0629·2023-08-23 22:18

【VUE】新项目搭建记录

的新特性还是不错的Vue.jsdevtools目前暂不支持VUE~3.0，所有调试的时候在控制台自己打印，好在前期的数据流程较短，也能满足需求整个项目的配置变简单了，基于vue-cli4UI框架使用的阿里的antd-vue
Draven_Lu·2023-08-15 07:15

如何改造antd-vue的table支持虚拟列表功能

对于超大数据量的接口来说，如果前端直接一股脑的渲染出来，必然会导致渲染超时、操作卡顿、内存爆表、网页奔溃等情况，因此一般的对于大数据量的列表处理，无非就以下几种方式采取分页的方式，减少每页的数量比如每页10条采取懒加载的方式，滚到底部再加载第二页数据（缺陷就是后面会越来越卡）采用可见范围渲染的方式，这需要判断当且节点是否在可见范围（利用高度计算或者用IntersectionObserver）采用虚
朝着大前端冲鸭·2023-08-11 10:26

基于antd-vue封装的下拉选择框滑动加载并且带搜索还可以新增的功能

还是那句话，只有你想不到的，没有产品不敢想的。这个也无需求也是emmmmm头一回接。那就是下拉框数据很多的时候不想要一次性查出来，想要滑动加载，那第一反应很简单咯，分页查询嘛{{item.name}}```bash//查询参数，分页查parmas:{keyword:'',page:1,pageSize:10},//查数据getList(option){//防重复，防抖节流if(this.loadi
左撇子没秃头·2023-07-29 03:16

antd-vue中v-model不能和 v-decorator同时使用

获取v-decorator的值methods:{changeMe(Value){//Value就是当前触发字段的值，也可以用下getFieldValue获取this.form.getFieldValue('name')}}设置v-decorator的值changeMe(selectedValue){this.form.setFieldsValue({name:"值",});}
Argenta99·2023-07-20 10:13

vite+vue3+TS项目引入antd-vue的问题记录

文章目录1、vite创建的vue+TS项目引入antd-vue2、antd-vue定制主题报错记录博，用于记录Vue3项目中遇到的问题1、vite创建的vue+TS项目引入antd-vue由于不想直接在
Sophie_U·2023-07-19 14:13

antd-vue - - - - - date-picker组件在非本地不好使？无法切换日期？

date-picker组件在非本地不好使？无法切换日期？1.问题描述2.问题原因&解决办法离离原上谱，真的是离了大谱记录一个深深的踩坑记录！！！选择日期，肯定要选择ui组件的date-picker，使用antd也不例外。1.问题描述引入组件，ok本地开发，ok发到线上，不ok？？？what???v-model:value尝试过，本地好使用，测试环境不好使:value也尝试过，本地好使用，测试环境不
Dark_programmer·2023-06-24 00:56

修改antd-vue a-table的悬浮颜色

修改antd-vuea-table的悬浮颜色使用/deep/或者!important都没效果，使用如下样式.ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td{background:#fbaa96;}
搬砖的前端·2023-06-14 15:51

ANTD-Vue 可编辑table(v-model配合table使用)

ANTD-Vuetable配合v-model使用点击查看改变后的数据constcolumns=[{dataIndex:"name",key:"name",title:"name",scopedSlots:{customRender:"name"},//使用columns时，可以通过该属性配置支持slot-scope的属性，如scopedSlots:{customRender:'XXX'}},{ti
从哪C？V到哪？·2023-06-14 15:51

解决antd-vue表格批量操作选中框仍残留的问题

对数据批量操作成功，将选中的值selectedRowKeys值清空后，值虽然为空但是选择框依旧是选中状态，下面是解决方法操作成功后将值清空这样写就能将选择框
麻辣_水煮鱼·2023-06-14 15:21

antd-vue table里hover行背景色修改

//没有固定的hover颜色修改.ant-table-tbody{tr:hover:not(.ant-table-expanded-row)>td,.ant-table-row-hover,.ant-table-row-hover>td{background-color:@background-color-light;}}//有固定向左向右的hover颜色修改.ant-table-fixed{.a
马娟·2023-06-14 15:20

antd-vue table跨行合并单元格

效果图：直接贴代码{returnindex}">constcolumns=[{title:'资产',colSpan:3,align:'center',customRender:(text,record,index)=>{constobj={children:'',attrs:{},style:{}};if(index===0){obj.children='国土空间资源';obj.attrs.row
麻辣_水煮鱼·2023-06-14 15:20

antdui table的行 操作————antd-vue

:customRow=‘LXRclick’写一个事件LXRclick(record,index){return{on:{click:()=>{console.log(record,index);this.OpenDetail(record)}dblclick:(event)=>{},//双击contextmenu:(event)=>{},mouseenter:(event)=>{},//鼠标移入行
⎛⎝陈嗯嗯⎠⎞·2023-06-14 15:50

实习随笔-7、Antd-vue表格分页器设置

序言：最近使用antd-vue进行开发，在使用表格组件Table时，遇到了一个问题，就是表格组件自带分页器，而且分页器的样式和我想要的不一样（应该是和产品要的不一样)，比如自带的是这样的：需求是这样的：
互联网切图仔·2023-06-14 15:48

实习随笔-8、antd-vue Table组件根据权限在对应行渲染操作

由于本项目是用antd-vue来进行开发的，笔者也是第一次用这套组件，着实费了我一些功夫才搞出来，用的是比较直观的方法，优化上尚有欠缺，希望各路大佬补充需求实现：代码实现：一、首先，我们要想的是，怎么将这些操作渲染到表格的操作列上面
互联网切图仔·2023-06-14 15:48

antd-vue table 分页缓存已勾选数据

分页分页配置pagination:{total:0,//数据总数current:1,//当前页数defaultPageSize:100,//默认每页显示10条数据showTotal:null,//展示总共有几条数据showSizeChanger:false,//显示修改pageSize的下拉框pageSizeOptions:['100'],//设置pageSize的可选值，页面可以通过下拉框进行选
qq_36437172·2023-06-14 15:47

antd-vue table 动态添加必填项

首先我们使用async-validator库进行校验.详情内容请查看:使用async-validator自定义校验规则实现table组件的循环表单校验功能.校验方式跟上述案例是一致的.代码如下:importSchemafrom'async-validator'//校验validate(validateProp,rules,value){//真正校验的的时候再生成validator函数if(!val
qq_36437172·2023-06-14 15:47

antd-vue菜单选中

antd-vue菜单选中进入antd-vue的官网，我们可以直接在导航菜单组件参考文档中找到所有的答案，剩下的只是用我们的逻辑思维把官方提供的API文档串起来即可！
abc_ABC123A·2023-06-14 15:46

antd-vue中的表格排序

antd-vue中的表格排序在使用antd-vue的表格想实现排序，但是不知道怎么弄的可以看这里，此处讲解了一个是数字类的排序（例如成绩），一个是字符串类的排序(例如姓名)。那么，我们开始吧。
喝西瓜汁的兔叽Yan·2023-06-14 15:15

antd-vue table列表中getCheckboxProps的使用

业务逻辑：当用户批量操作时，判断符合某一条件决定是否可以勾选文档介绍看到它确实也不知道怎么用，然后百度说是可以获取到列表选择checked的属性，由于这是属于rowSelection选择功能配置里的，就在里面加上了getCheckboxProps这里就是实现一个最简单的业务，没什么难度，以后有不一样的业务需求也可以往里面加，主要先学会使用它
ZY9421_HL·2023-06-14 15:15

antd-vue - - - - - table使用

场景需求如下：自适应页面高度，表头固定，body可滚动使用table自带分页器切换页码，请求对应数据操作列自定义注意:若列头与内容不对齐或出现列重复，请指定固定列的宽度width。如果指定width不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。建议指定scroll.x为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过scroll
Dark_programmer·2023-06-14 15:14

antd-vue - - - - - upload组件的使用

upload组件的使用参数说明：file:list:上传列表数据name:上传时的keydata:上传时额外的参数header:上传列表数据actions:上传接口地址before-upload:上传之前的回掉change:传文件改变时//变量定义updateData:{billId:"",fileType:""},uploadLoading:false,//是否正在上传loading:false
Dark_programmer·2023-06-14 15:14

antd-vue - - - - - table增加统计行？

table增加统计行尝试一、footer&Summary使用summary尝试二、直接将统计行push进dataSource第一次遇到这个需求，有点懵。在【antd-vtable】官网仔细看了一番，找到这么两个配置footer[表格尾部]和Summary[总结栏]所以可以证明，你所需要的需求，总有人在为你负重前行！！！尝试一、footer&Summary在看到这两个配置项时，就感觉‘有救了’。尝试
Dark_programmer·2023-06-14 15:13

antd-vue中树结构显示 在线数/总数，实现在线人员绿色高亮，排序在前。（超难）

前言最近开发中，遇到了一个需求，需要使用到antd-vue下的Tree组件。需要实现的功能点如下：1.树结构是部门的组织机构，包含的有部门内容和人员。
喝西瓜汁的兔叽Yan·2023-04-21 18:50

vue常用组件汇总

目录UI组件组件UI组件antd-vue：官网地址elemnetUI：官网地址组件vue-fragment：片段组件，npm地址
颓废的四哥·2023-04-15 10:52

vue3封装一个仿ant-design-vue的table组件

最近需要在不使用UI框架的情况下封装一个简单的表格，由于对antd-vue比较熟悉，所以仿照了antd-vue的样子写了个简化版的Table组件。
VtoC·2023-03-20 01:11

antd-vue 动态select回显时错误的处理方法

前提：select是动态的，之前提交过得值可能已经在select中删除了，所以回显时只有一串ID我的解决方法就是改源码：antd-vue版本^1.7.8源码位置node_modules\ant-design-vue
·2023-02-17 15:46

antd-vue table双击编辑单元格，失去焦点保存

场景：使用ant-design-vue的table组件，要求实现新增，直接在表格中增加一行，双击或单击当前行状态变为可编辑状态，点击其他dom，失去焦点时，进行自动保存。示例：编辑状态@dblclick.native="dbClickFun(record,index,item)"双击修改当前行状态。record.isEdit设置为true@blur="blurFjxx($event,record,
·2023-02-02 11:21

antd-vue a-date-picker 组件限制时间选择范围

使用antd-vue的时间控件，并设置选择范围。
·2022-08-17 09:27

Warning: [antdv: DatePicker] `value` provides invalidate m

vue3项目中使用antd-vue的a-date-picker时间组件，选择时间时，页面报错解决方案：format属性改为valueFormat
·2022-08-15 15:50

antd-vue的table二次封装

exportdefault{data(){return{tableList:[],pagination:{current:1,pageSize:10,total:0,showTotal:(total,range)=>`共${total}条记录`,showSizeChanger:true,showQuickJumper:true}}},props:{fetchData:{type:Function,
charles1600·2022-08-04 01:29

antd-vue upload自定义下载文件

功能要求：上传文件后点击已上传的文件，实现图片格式与pdf格式的文件打开预览文档格式的文件点击下载并且下载时候的文件名与上传时保持一致。问题：由于后台为了解决可能出现的相同文件名上传而导致后传的文件覆盖上一次文件的情况，就在文件上传至服务器后在文件名后面加一串随机串。这样导致在接口返回给前端的url的地址上会变成文件名+随机字符串。同时，这样就导致前端也出现一个情况：如果直接用a-upload组件
·2022-08-01 17:59
上一页 1 2 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他