ant design vue v1版本使用记录

xiaoqiancai

已于 2024-12-19 15:13:23 修改

阅读量247

点赞数 2

文章标签： html5 vue.js

于 2024-12-19 10:55:33 首次发布

本文链接：https://blog.youkuaiyun.com/xiaoqiancai/article/details/144579927

版权

1.Tree 树型选择控件

展开/收起节点时触发使用的是expand

2.Table中某一个行的某一个字段没有值，表格中显示 -

使用customRender 属性

customRender: (text) => { return text || '-' }

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xiaoqiancai

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Ant Design Vue v1.x 填坑记录 - DatePicker

FortheOne的博客

02-21

1221

DatePicker使用范围选择a-range-picker时，如果mode为month或year（选择到月或年），点击选择后不触发change事件，面板也不会自动关闭

Ant Design Vue 使用记载

小小白兔兔

01-20

2380

一、form之form-item的label自定义，使用插槽，自定义template <a-form-item class="formitem"> <template v-slot:label> <span class="myheadline">项目名称</span> </template> <a-input style="width: 500px"

参与评论您还未登录，请先登录后发表或查看评论

Ant Design Vue文件上传详解

喜欢前端的炸鸡爷爷

08-31

7307

9.关于button的type也顺带一提哈哈哈，就是去icon图标里面选择喜欢的icon然后放在type里面就能在button里面加上图标了。2.multiple：(这个根据自己的业务需求来决定) false:不支持 true:支持。8: headers （这个要针对具体的业务需求了一般很少有headesr的问题）fileList 已经上传的文件列表（受控） object[] 无。5.@change: 上传文件改变时的状态 (核心)3.action: （也就是后端开发的上传接口）...

ant-design-vue@1.7.8版本下拉多选级联

肖晗的博客

08-30

2616

，需要使用下拉级联多选，时间又比较紧急，因为使用的是 ant-design-vue 的 v1 版本，看到新的版本就有下拉多选级联，在网上也搜索了下，发现了两个，一个是 doit-ui-web ，一个是 design-vue-ui，仔细看了下，后面这个主要是针对 v1 版本进行扩展组件的，也是我现在很需要的。

Ant Design Vue 二维码下载

寻道书生的博客

07-22

265

关于前端图片下载功能的实现

Ant Design Vue 相关介绍

飞扬小阁

12-16

2162

Ant Design Vue有三个版本： v1（vue2.x）：https://www.antdv.com/docs/vue/introduce-cn/ v2（vue3.x）：https://2x.antdv.com/docs/vue/introduce-cn/ v3（vue3.x）：https://next.antdv.com/docs/vue/introduce-cn/ ANTD PRO VUE https://pro.antdv.com/ package.json里看支持的是vue2.

ant design vue做导入导出excel

weixin_69639387的博客

08-18

1129

ant design vue做导入导出excel

手写VUE后台管理系统4 - 整合UI框架AntDesignVue

死牛胖子的技术随笔

03-24

1840

从零开始手写VUE后台管理系统，整合UI框架ant-design-vue

ant design vue datapick日期控件记录

czx3387170的博客

05-08

953

最近项目中引用了ant design vue库，以下是对日期控件的一些记录。可以使用moment() 首先要记得引入importmomentfrom'moment' <a-range-picker :default-value="[moment().startOf('month'), moment()]" :format="dateFormat" /> 上面的默认值：moment().startOf('...

ant-design-dark-theme:Ant Ant Design的深色主题变量

05-07

:new_moon_face: 蚂蚁设计黑暗主题 :new_moon_face: Ant Design的深色主题。仍处于实验阶段，欢迎尝试并帮助我们进行改进。访问进行预览。安装 $ npm install @ant-design/dark-... 在Ant Design Pro中使用： :

ant-designer-vue离线文档1.+版本

01-21

首先，Ant Design Vue 1.x版本是该框架的重要里程碑，它包含了大量优化和改进。这个离线文档为开发者提供了一个无需网络连接即可查阅的资源，对于那些在网络环境受限或追求开发效率的场合尤其实用。 Ant Design Vue...

【HTML5】老式放映机原理-实现图片无缝滚动

weixin_41798072的博客

04-29

795

HTML5中js，老式放映机实现图片无缝滚动

【HTML5】显示-隐藏法实现网页轮播图效果

weixin_41798072的博客

05-06

272

【HTML5】显示-隐藏法实现网页轮播图效果,实现思路：先将所有图片在页面中设置好，然后给放置图片的元素li添加display：hidden属性将其隐藏，然后通过js获取到放置图片的元素li，再一个一个的给li元素添加display：block属性将其显示出来，从而达到轮播图的效果。

HTML5+JavaScript实现连连看游戏之二

cnds123的专栏

05-02

1314

HTML5+JavaScript实现连连看游戏之二，可以自定义行列数、可用图片数（实际是使用Font Awesome图标库以便跨平台兼容，通过CDN加载图标库）

HTML5好看的水果蔬菜在线商城网站源码系列模板8

热门推荐

优快云博客专家，系统架构师，有合作、疑惑请私信博主。

04-30

3万+

HTML5好看的水果蔬菜在线商城网站源码系列模板8，水果蔬菜在线商城源码，最全商城模板，水果蔬菜模板，一款大气的网上蔬菜店/水果店购物商城HTML模板，内置六个模板页面，覆盖各种商城需求页面，，酷炫的界面效果，简易的整体风格，实现了商店的所需功能，网格列表，信息列表，我的订单，轮播图，表单，导航菜单，购物车，列表等，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。

HTML5 新元素

csbysj2020

05-05

605

结构性元素表单元素媒体元素语义化元素HTML5 新元素为网页设计提供了更多可能性，使开发者能够更方便地构建具有良好用户体验的网页。掌握这些新元素，有助于提高网页的可用性和可访问性。在今后的网页开发中，我们可以充分利用这些新特性，为用户提供更加丰富、便捷的浏览体验。

setup 函数在 Vue 3 中的作用是什么？什么时候会执行

Bruce__taotao的博客

05-06

1148

setup()函数是Vue 3 中 Composition API 的核心入口，它在组件生命周期中扮演了非常关键的角色。setup()是 Vue 3 中组件逻辑的统一入口，在组件创建前执行，用于定义响应式状态、逻辑封装、生命周期注册、事件触发等，是 Composition API 的核心支点。就是把setup()函数**“自动内联展开”，省略return {}等冗余写法，让你写的每一行代码自动在 setup 环境中执行**。

空值运算符最佳实践清单（适用于 Vue 项目）

字节叔叔

05-07

建议理由优先使用?替代深层&&判断更清晰、简洁展示用户数据或接口返回值时配合??提供默认值防止界面空白或崩溃表单初始值统一使用??''处理避免 uncontrolled 警告在 computed / methods 中统一处理空值逻辑保持模板整洁编写公用函数封装复杂的空值获取提升代码复用性。

Element-ui Table tree 结构使用（解决无展开箭头）

最新发布

weixin_45636198的博客

05-08

358

官方示例中，有：:tree-props=“{children: ‘children’, hasChildren: ‘hasChildren’}” 绑定的属性。不是懒加载情况下，不需要 hasChildren（绑定的 table 数据中不能有，否则不能显示）【我自己就栽在这一条】不是懒加载下，children 字段一致， tree-props 可以省略，只需要 row-key 即可。从源码中看，treeProps 是有默认值的，一样时不用传，rowKey 没有所以一定需要传。上面这个是正常的使用。

ant design vue v1版本的注册表单示例

05-26

Ant Design Vue v1版本的注册表单示例可以参考以下代码： ```vue <template> <a-form :form="form" @submit="handleSubmit"> <a-form-item label="用户名"> <a-input v-decorator="['username', {rules: [{required: true, message: '请输入用户名'}]}]" /> </a-form-item> <a-form-item label="密码"> <a-input type="password" v-decorator="['password', {rules: [{required: true, message: '请输入密码'}]}]" /> </a-form-item> <a-form-item label="确认密码"> <a-input type="password" v-decorator="['confirmPassword', {rules: [{required: true, message: '请确认密码'}]}]" /> </a-form-item> <a-form-item> <a-button type="primary" html-type="submit">注册</a-button> </a-form-item> </a-form> </template> <script> export default { data() { return { form: this.$form.createForm(this) }; }, methods: { handleSubmit(e) { e.preventDefault(); this.form.validateFields((err, values) => { if (!err) { console.log(values); // 提交注册表单 } }); } } }; </script> ``` 其中，使用了 `a-form` 和 `a-form-item` 组件来构建表单，使用了 `v-decorator` 来绑定表单项的值和校验规则，使用了 `@submit` 事件来处理表单提交事件，使用了 `this.form.validateFields` 方法来校验表单并获取表单数据。需要注意的是，这里使用了 `this.$form.createForm(this)` 来创建表单实例，这是 Ant Design Vue v1 版本的写法，如果是 v2 版本需要使用 `this.$form.createForm(this, options)` 来创建表单实例。