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

已于 2022-04-14 10:13:20 修改
阅读量609 收藏 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
    评论
专栏目录
Ant Design Vue V3 Dropdown 下拉菜单
m0_65137738的博客
02-07 3655
向下弹出的列表。 何时使用# 当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。 用于收罗一组命令操作。 Select 用于选择，而 Dropdown 是命令集合。 API# # 属性如下 参数 说明 类型 默认值 disabled 菜单是否禁用 boolean - getPopupContainer 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定.
【vue】封装下拉框option静态数据
向着光芒的女孩
04-08 792
之前在vue-cli中，有些静态下拉框数据都写在每个vue页面文件里，发现有些页面也会使用一样的，所以想着把它抽出来方便管理和查看 思路总结 1.创建一个js文件 在src/libs目录(看项目目录结构灵活放)下创建 options.js , 先只写了一个，文件内容如下： export const userStatusOpt = [ { value: 0, label: '禁用' }, { value: 1, labe
[Vue] 绑定下拉菜单
最新发布
m0_67587248的博客
09-20 348
同学们，今天的天气很是不错，我们之前进行了复选框的绑定，这次来看看下拉菜单的绑定吧，因为要赶这个创作进度，真的只有再水一篇文章了。大家就当是饭后甜点看看就行。苏子云荷尽已无擎雨盖，菊残犹有傲霜枝。一年好景君须记，最是橙黄橘绿时。诸位还是得培养文化气息，雨季尤为重要，是心灵感悟和生化最好的时机。
Ant Design Vue select下拉列表设置默认值
Y4258的博客
04-22 4848
如果要默认值，还可以这样设置 ：default-value
antdv表单下拉框默认值问题
nanciii_的博客
10-26 2159
在工作中遇到这样一个需求场景：需要给下拉框添加默认值，且在新增数据后自动更新该默认值为新增的那一条。 心想这还不简单，直接给下拉框添加属性defaultValue="xxx"不就好了。然而事情并没有想象的简单，使用该方法后默认值并不生效。 <a-select placeholder="请选择目录名称" style="width: 170px" :defaultValue="dirList[0].dirId" v-model="form.dirId" allowClear> <
antdesign的表单中的下拉框设置默认值BUG处理
马优晨
06-22 1万+
问题： 使用 antdesign 下拉框的默认值是状态值，而不是状态值对应的文案？ model层传递的数据 view层在表单中设置的值 解决方案： 在默认值的后面加上一个空字符串进行转换...
Ant Design Vue select 中label-in-value的使用，以及动态设置select默认值，默认值为空时placeholder不显示的问题
qq_43710066的博客
03-30 6256
Ant Design Vue select 中label-in-value的使用，以及动态设置select默认值，默认值为空时placeholder不显示的问题
2021-07-28VUE下拉框默认值设置
buchishutiao的博客
07-28 2182
出现的问题是： 修改功能，当首次加载除要修改的字段，不做修改提交，下拉框字段获取到的值是lable而不是我们所需要的value值， 问题的原因： 首次加载时默认值都为空而且被影藏，选择了需要修改字段时，在监听中才被赋值，二下拉框中绑定字段时绑定的lable 问题的解决： 如果使用在watch中赋值给每个字段的这种方法，可以在获取的下拉列表中使用push方法，如下，匹配下拉列表，记住每次监听都会push，所以要清空。 ...
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 ...
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的...
vue-antd-admin：:ant:Ant Design Pro与Vue的实施
02-06
Vue Antd管理员的Vue实现版本开箱即用的中后台前端/设计解决方案多种主题模式任选：预览地址： : 使用文档： : 常见问题： ://iczer.gitee.io/vue-antd-admin-docs/start/faq.html国内知名： ://gitee.com/iczer/vue-...
vue3-antd-admin:基于vue-clivite + vue3.0 + ant-design-vue2.0 +打字稿钩子的基础后台管理系统模板RBAC的权限系统，JSON架构动态表单，动态表格，漂亮的锁屏界面
03-11
vue3-antd 基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0的后台管理系统模板 账号：admin，密码：123456 系统模块数据是从先前获取来的真实数据，路由也是从内部动态获取的，而只是通过内网穿透提供访问的，难免...
vue-antd-jsx:vue3 + ant-design-vue2
05-05
vue-antd-jsxvue3 + ant-design-vue2jsx简单解决方案安装yarn install介绍由jsx代替vue文件，关于jsx语法的基本用法在页面中都有对函数式组件更加友好具体都可以在中找到用法变动双向绑定v-model<input vModel={...
使用Geolocation校正GDAL不支持的数据
GDAL专栏
03-28 3023
对于低分数据来说，常用的校正方式就是给定数据的经纬度查找表来进行校正。在GDAL中，这种校正方式叫Geolocation array。常用的数据有国外的MODIS数据，国内的如风云系列（FY）和海洋系列卫星（HY）都是使用这种方式来进行处理。 GDAL库读取MODIS数据（HDF格式）的时候，会自动读取里面的经纬度查找表，并构造一个叫做GeoLocation的元数据段。如下所示： 只要有这个
如何查看vue版本和vue/cli的版本
热门推荐
m0_58017645的博客
03-29 2万+
经常有人以为vue -V是查看vue的版本，但其实不是，一开始自己迷迷糊糊也以为是，后来查文档之后才知道正确答案，特此在这里总结一下，那么这条博客就当是开启学习vue3之路的第一条笔记叭~ 如果查看vue版本和vue/cli脚手架的版本，这里共有两种方式： 一、命令行 vue版本 npm list vue vue/cli版本 vue -V 部分截图： 二、package.json文件 查看package.json文件相关依赖版本号： ...
vue 组件使用vuex中的mutations方法报错，报unknown mutation type的错误
m0_58017645的博客
07-27 1万+
报错：【vuex】 unknown mutation type: mutation vuex如果分为几个模块，方法是在某个模块中的话，如果直接在组件中通过this.$store.commit('方法名')是获取不到的，必须要在前面加上模块名，如this.$store.commit('模块名/方法名')才可以获取到。 在项目当中，我当前组件的vuex写在store/DataMonitorStore/DataMonitorStore.js里的，所以这里必须加上模块名。 当前组件是sliderBar.vue
antd design vue 日期组件汉化
m0_58017645的博客
07-08 4308
使用antd design vue组件库时，一些默认提示为英文，要将英文汉化，以DatePicker为例 这里未把Today，select time等汉化的效果： 后来查找了很多文档，按照文档把其中一个日期选择框的Today给汉化了，具体的步骤如下： 1.引入 import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); 2.在data中初始化定义，并把自己想汉化的内容重新设置
vue 注册页面的实现
m0_58017645的博客
07-12 2656
一、登录组件表单的数据绑定 1.为a-form-model加上 :model="form"属性进行数据绑定 在a-form-model表单上填写的数据自动同步到form对象上 :model="form" 在当前组件的行为区有data数据，在data数据里面设置一个form对象，即为表单的数据绑定对象 2.为每一个表单项的文本输入框通过v-model属性绑定form对象上具体的属性中 为了看到测试效果，我在这里先在form对象初始化一个值，用户在页面上可以看到以用户名和密码等 ...
antd design vue分页组件
m0_58017645的博客
07-13 2421
我们在使用分页组件的时候可以有两种方法： 第一种是直接用表格()的自定义:pagination属性最方便；如下图所示： 第二种是分页组件 这里我总结的是第二种方法的使用，由于是 Ant Design Vue 的组件，所以必须安装Ant Design Vue才能使用，具体的安装请看官网~ 1.添加分页组件 <div class="seaTable"> <a-table :columns="columns" :dat
vue3+ ant-design-vue 样式
08-16
要在Vue3中使用Ant Design Vue的样式，可以按照以下步骤进行操作： 1. 首先，在你的项目中安装Ant Design Vue组件库。你可以通过npm或者yarn进行安装，具体的安装命令可以在Ant Design Vue的官方文档中找到。 2. 在你的Vue组件中引入Ant Design Vue的样式文件。你可以在组件所在的Vue文件中使用import语句引入Ant Design Vue的样式文件。 例如，在你的Vue文件中添加以下代码： ```javascript <style lang="less" scoped> @import '~ant-design-vue/dist/antd.less'; </style> ``` 这将会导入Ant Design Vue的样式文件，并使它只在当前组件中生效。 3. 接下来，你可以根据需要自定义你的组件样式。你可以在style标签中使用普通的CSS语法来定义和修改组件的样式。 例如，你可以在style标签中添加以下代码来自定义一个按钮组件的样式： ```javascript <style lang="less" scoped> .my-button { border-radius: 10px; } </style> ``` 这将会给按钮组件添加一个圆角为10px的边框样式。 通过以上步骤，你就可以在Vue3中使用Ant Design Vue的样式了。记得按照官方文档中的指引导入需要的组件，并在模板中使用它们。如果你需要更多示例和帮助，可以参考官方文档或者Ant Design Vue的开源项目。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue3+ant design vue+ts实战【ant-design-vue组件库引入】](https://blog.csdn.net/XSL_HR/article/details/127396384)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue3+ant-design-vue按需加载组件](https://blog.csdn.net/qq_42263570/article/details/130143934)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue3+element-plus的后台管理系统模板 和 vue3+ant-design-vue的后台管理系统模板](https://blog.csdn.net/qq_61233877/article/details/131008600)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值