vue+antd-design-vue 设置下拉菜单默认选项并（静态）遍历

已于 2022-04-14 10:13:20 修改
阅读量630 收藏 1
点赞数 1
分类专栏： Vue 文章标签： 前端
于 2021-07-01 15:43:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58017645/article/details/118388188
版权

设置默认值

在data中全局定义defalutTime变量，初始化为2016年

给下拉菜单添加v-model属性，动态绑定value值

遍历

在data中定义一个数组，里面包含不同年份的对象

给列表遍历的时候使用v-for遍历数组

一个小Pan桃❀
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-antd-pro:vue + ant-design-vue创建后台管理系统模板
03-11
欢迎来到vue-antd-pro :waving_hand: 基于vue-cli3和构建的后台管理系统模板，使用json-server做数据模型。 安装依赖 安装前端依赖 yarn 安装数据mock依赖 cd server yarn 运行 运行数据mock服务 // enter server ...
Ant Design Vue select下拉列表设置默认值
Y4258的博客
04-22 4985
如果要默认值，还可以这样设置 ：default-value
antdv表单下拉框默认值问题
nanciii_的博客
10-26 2289
在工作中遇到这样一个需求场景：需要给下拉框添加默认值，且在新增数据后自动更新该默认值为新增的那一条。 心想这还不简单，直接给下拉框添加属性defaultValue="xxx"不就好了。然而事情并没有想象的简单，使用该方法后默认值并不生效。 <a-select placeholder="请选择目录名称" style="width: 170px" :defaultValue="dirList[0].dirId" v-model="form.dirId" allowClear> <
Ant Design Vue select 中label-in-value的使用，以及动态设置select默认值，默认值为空时placeholder不显示的问题
qq_43710066的博客
03-30 6902
Ant Design Vue select 中label-in-value的使用，以及动态设置select默认值，默认值为空时placeholder不显示的问题
Ant Design Vue V3 Dropdown 下拉菜单
m0_65137738的博客
02-07 3768
向下弹出的列表。 何时使用# 当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。 用于收罗一组命令操作。 Select 用于选择，而 Dropdown 是命令集合。 API# # 属性如下 参数 说明 类型 默认值 disabled 菜单是否禁用 boolean - getPopupContainer 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定.
ant design vue中menu组件递归渲染报错解决
牛先森家的博客
06-28 2039
ant design vue中menu组件递归渲染报错解决
管理系统系列--vue-antd-admin基于vue-cli4+vuex+ant-design-vue开发的后台管.zip
02-25
【标题】"管理系统系列--vue-antd-admin基于vue-cli4+vuex+ant-design-vue开发的后台管理框架"揭示了这是一个使用特定技术栈构建的后台管理系统。它主要基于Vue.js，利用Vue CLI 4（Vue.js的命令行工具）进行快速...
vue-antd-admin:基于vue3 + antd + JavaScript的后台系统
03-11
vue-antd-admin欢迎使用vue-antd-admin，这是一个基于vue3.0 + antd2.0.0 + vuex4.0 + vue-router4.0的适合新手学习的项目，后台全部采用了composition API的写法，作者也只是个刚出学校的初级菜鸟前端，在vue3的...
基于umi+antd-mobile的移动端项目模板
02-22
其次，antd-mobile是蚂蚁金服开发的基于React的移动端UI组件库，它是antd（Ant Design）的移动端版本。antd-mobile遵循Ant Design的设计哲学，提供了丰富且易于使用的组件，如按钮、表单、导航栏、列表等，帮助...
使用vue3+ant-design-vue+vite+ts开发的通用后台框架.zip
01-04
使用vue3+ant-design-vue+vite+ts开发的通用后台框架，实现了权限系统、动态菜单、表格集成快速使用等功能，简洁干净开箱即用。 Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 ...
antdesign of vue关于a-select下拉框选择不生效问题
DENGHANJIE123的博客
09-02 6573
antdesign of vue关于a-select下拉框选择不生效问题
Ant Design 常见用法与坑点总结（二）：Form 表单下拉框设置初始值
weixin_45138590的博客
04-20 2279
Ant Design 是蚂蚁出品的出色优秀的 React 组件库，相信使用 React 进行管理系统开发的小伙伴们或多或少都接触过 Ant Design。很多公司基于 React 开发的管理端系统也都是使用 Ant Design 的组件库。因此，了解 Ant Design 的常见用法与坑点还是有必要的。本系列文章针对 Ant Design 一些官方文档虽有提及，但是容易被忽略的，又比较重要常见的用法进行总结。同时对工作使用过程当中遇到的坑点进行归纳。
dropDownList显示默认项
smile05161229的博客
01-03 598
dropDownList显示默认项 dropdownList控件在默认情况下都会自动绑定下拉列表的第一项，但是加入我们想要当页面加载时绑定“助教”怎么办呢？ 根据设定的文字找到相应的项： 现在我们可以看见默认加载时显示第一项了。 解释： FindByText(string text)<找到指定文字的项> 另外还有： FindByValue(int v)<找到指定值的项> 用法同上 ...
Vue Ant Design Vue table customRow + rowClassName 设置行属性 + 表格行的类名（带斑马纹和默认选中第一条数据） - 附完整示例
m0_48968874的博客
01-22 1178
Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.jsAnt Design Vue — An enterprise-class UI components based on Ant Design and Vue.jsAn enterprise-class UI components based on Ant Design and Vuehttps://3x.antdv.com/components/t
ant design vue选择器select的使用（详细）
weixin_45745641的博客
08-11 1万+
概要 这次是写一个基于ant design vue的社团招新小程序的后台，因为涉及成员的三种状态描述（不/通过，待定），所以在此使用select进行实现，并且点击下拉框选择会触发对应的函数，更改数据库的数据反映到小程序端。今天那就来讲讲select的使用以及对应触发函数的绑定，先看一下实现的效果图： 具体实现过程： 写好前端样式 对于组件的使用我们可以先去官网文档找到自己想要实现的效果（官方文档传送门），这次我们使用获得选项文本的样式，然后改变参数，写成我们自己想要的效果 看一下 a-select 中的
【vue】封装下拉框option静态数据
向着光芒的女孩
04-08 837
之前在vue-cli中，有些静态下拉框数据都写在每个vue页面文件里，发现有些页面也会使用一样的，所以想着把它抽出来方便管理和查看 思路总结 1.创建一个js文件 在src/libs目录(看项目目录结构灵活放)下创建 options.js , 先只写了一个，文件内容如下： export const userStatusOpt = [ { value: 0, label: '禁用' }, { value: 1, labe
Ant Design Vue2 实现列表中多行下拉框根据后台获取的数据展示对应的默认选项
最新发布
hero8011的博客
03-27 1143
Ant Design Vue2 实现列表中多行下拉框根据后台获取的数据展示对应的默认选项，实现这个需求的核心是数据的映射与重组，然后配置到模版中的下拉组件进行数据绑定和遍历
ant design vue 中select默认选中（V2版本）
pipizhou16的博客
07-07 4916
ant design vue 中select默认选中
（详解）Vue设置select下拉框的默认选项（解决select空白的bug）
热门推荐
小安驾到的博客
09-19 1万+
解决用vue动态渲染select下拉框时，select下拉框会出现空白的bug
Vite3+Vue3+TS+Ant-design-vue3全栈实战：快速构建与配置教程
本文档是一份全面的指南，适合希望通过Vite3、Vue3、TS和Ant-Design-Vue3构建现代化前端应用，并将其与后端SpringBoot集成的开发者。通过这个教程，读者可以学到从项目初始化、配置到实际功能开发的完整流程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值