ant-design-vue
空城里的往日时光
这个作者很懒,什么都没留下…
展开
-
upload组件—文件上传的示例代码
目录一、概述二、详解一、概述开发中使用过的上传文件代码。二、详解模板代码<a-upload name="file" :showUploadList="false" :before-upload="beforeUpload" accept=".doc,.docx"> <a-button type="primary">上传</a-button></a-upload>文件上传前的钩子原创 2020-12-12 15:58:58 · 469 阅读 · 0 评论 -
select组件—加载大量数据造成的卡顿问题
目录一、概述二、详解一、概述select组件一般加载几百条数据就会出现卡顿现象,原因是antd vue的select组件针对加载大量数据的情况,暂时没做优化,因此每次点击select组件都会出现卡顿。本文将已纯前端的方式解决该问题。二、详解方案:初始加载一部分数据,后续随滚动条滚动陆续加载。步骤一:模板代码<a-select v-model="demoValue" show-search option-filter-prop="children"原创 2020-12-06 22:07:07 · 3732 阅读 · 0 评论 -
table组件—可伸缩列
目录一、概述二、详解三、拓展一、概述ant design vue框架中,table组件本身不具备列拖拽功能,若想实现列拖动调整列宽的功能,需要引用vue-draggable-resizable插件。二、详解第一步:安装vue-draggable-resizable插件vue-draggable-resizable插件推荐安装2.1.0版本,最新的2.2.0版本存在问题。> npm install vue-draggable-resizable@2.1.0原创 2020-12-09 23:54:31 · 1438 阅读 · 1 评论 -
table组件—列同时使用ellipsis和fixed导致的错位问题
一、概述实际开发中,我们有可能会遇到这种需求,当table组件内容过多时,要求在左侧或右侧固定几列,同时不允许单元格内文字换行,超出部分用省略号代替。根据官网的API文档可知,使用table组件的ellipsis和fixed两个列属性可以实现该需求,但实际效果存在单元格错位问题。二、详解解决方法也很简单,只须添加如下样式即可。.ant-table-fixed-left table,.ant-table-fixed-right table{ width: min-content;原创 2020-11-21 01:00:04 · 1190 阅读 · 1 评论 -
table组件—分页控件的自定义
目录一、概述二、实例一、概述table组件单独使用时,只包含简单的分页功能,即上一页、页码和下一页。仅仅如此显然不能满足需求,所以需要我们根据pagination组件丰富表格的分页功能。二、实例自定义分页组件外观源码<template> <a-table :columns="cols" :data-source="tbData" :row-key="record => record.id" :pagin原创 2020-11-18 23:33:37 · 923 阅读 · 0 评论