朦胧淡月的博客_Ant Design Vue

vue3封装搜索表单组件

#### seacrch 表单完成的功能 ``` 1.根据

数据

下拉框

重置

原创 3月前 452 阅读

vue3.0使用ant-design-vue进行按需加载原来这么简单

下载 ui库 yarn add ant-design-vue 默认是全局引入，打包后体积很大，非常影响首屏加载速度，按需加载下载按需加载的插件;推荐使用cnpm cnpm install babel-plugin-import --save-dev 下载在开发环境中在项目的根目录下创建 ba

css

typescript

加载

原创 2022-09-01 16:54:39 869 阅读

ant-design-vue 表单验证详解

表单验证详解 <template> <!-- 第一个坑 :model="formState.youForm" 一定要写成这样不要写成:model="formState" :labelCol="{ style: 'width: 100px' }" 控制labe显示宽度 useSlectValue 是

微信

字符串

表单

原创 2022-09-01 16:54:26 1190 阅读

Ant Design Vue封装a-drawer

1.创建子组件 <template> <a-drawer :title="drawerInfo.customTitle" :placement="placement" :closable="drawerInfo.showCloseIcon" :visible="drawerInfo.visible"

微信

ico

支付宝

原创 2022-09-01 16:49:48 1185 阅读

Ant Design Vue中Table对齐方式显示省略号

Ant Design Vue中Table对齐方式显示省略号 <template>  <a-table :data-source="dataSource" :columns="columns" :pagi

微信

字段

左对齐

原创 2022-09-01 16:49:29 125 阅读

Ant Design Vue分页Pagination

<template> <div> <a-pagination show-quick-jumper v-model:current="current1" :total="500" @change="onChange" /> </div> </template> <script lang="ts"> i

微信

支付宝

javascript

原创 2022-09-01 16:49:14 98 阅读

Ant Design Vue中Table的选中详解

<template> <a-table :columns="columns" :data-source="data" :row-selection="rowSelection" /> </template> <script lang="ts"> import { defineComponent }

微信

支付宝

javascript

原创 2022-09-01 16:49:04 125 阅读

Ant Design Vue中TreeSelect详解

<template> <a-tree-select v-model:value="value" style="width: 320px" :tree-data="treeData" allow-clear @select="selectHnader" search-placeholder="Plea

微信

edn

javascript

原创 2022-09-01 16:48:53 1592 阅读

Ant Design Vue 单文件上传Upload

单文件上传 <a-upload name="file" :beforeUpload="beforeUpload" :multiple="false" accept=".xls,.xlsx" :showUploadList="nofalse" class="select-file" :customRe

微信

文件上传

上传

原创 2022-09-01 16:48:41 557 阅读

Ant Design Vue 中Drawer自定头部的样式、内容部分的样式、弹出层的样式

<a-drawer :title="myTitle" placement="right" :visible="visible" @close="onClose" width="720" :bodyStyle="{ marginBottom: '30px' }" > </a-drawer> :body

弹出层

原创 2022-09-01 16:48:30 156 阅读

使用Ant Design Vue的select搜索框出现的问题

Select 选择器进行搜索 <template> <div> <a-form-item label="分类:"> <a-select placeholder="请选择" style="width: 320px" v-model:value="formState.sortValue" :showSe

搜索

下拉框

原创 2022-09-01 16:48:12 4680 阅读

Ant Design Vue照片墙a-upload

<template> <div class="clearfix"> {{ fileList }} <a-upload list-type="picture-card" v-model:file-list="fileList" @preview="handlePreview" @change="han

微信

ico

数据

原创 2022-09-01 16:48:05 327 阅读

Ant Design Vue表单验证失败

表单验证遇见的坑 01 如果你受控数据是这样写的话 const formState= reactive({ youForm:{ youNaNe:'', useSlectValue: '001', date1: undefined, delivery: false, type: [], }, });

微信

数据类型

字符串

原创 2022-09-01 16:47:45 341 阅读

Vite 按需引入 Ant Design Vue 3.0

Vite 按需引入 Ant Design Vue 3.0 第一步下载： npm i unplugin-vue-components -D 需要注意的是：Vite你可以用 unplugin-vue-components 来进行按需加载。但是此插件无法处理非组件模块，如 message，这种组件需要手

按需加载

微信

支付宝

原创 2022-09-01 16:47:28 1681 阅读

Ant Design Vue栅格Grid的使用

栅格系统的设计理念建议横向排列的盒子数量最多四个，最少一个。因此我们的span一般设置为3或者4 小屏幕的话就另当别论了栅格系统的简单介绍 1.通过row在水平方向建立一组column（简写 col）你的内容应当放置于col内，并且只有col可以作为row的直接元素。这个非常重要 <a-r

栅格

栅格系统

响应式

原创 2022-09-01 16:47:16 1114 阅读

Ant Design Vue数字输入框InputNumber 有值但是验证却不能够通过

InputNumber 有值但是验证却不能够通过今天遇见这样一个问题，InputNumber 输入框中有值但是却却提

微信

数据类型

原创 2022-09-01 16:47:00 224 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	在线客服	网站地图	意见反馈

开源基础软件社区	51CTO学堂
51CTO	汽车开发者社区

51CTO博客