首页 > 其他分享 >antd-Vue 3.X版本 a-select使用

antd-Vue 3.X版本 a-select使用

时间:2024-10-30 16:58:37浏览次数:1  
标签:Vue name value label item 添加 antd id select

获取的数据可能不是 value、label 这种出参,所以使用 :field-names="{ label: 'name', value: 'id', options: 'children' }"  自定义参数,在使用过程中显示的label 并不单纯的是name可能是name拼接别的参数名,这时候的写法是

<a-select
    v-model:value="value"
    style="width: 120px"
    :field-names="{ label: 'name', value: 'id', options: 'children' }"
  >
   <a-select-option v-for="item in list" :key="item.id" :value="item.id">{{item.name+item.number}}</a-select-option>
</a-select>

这样写我本地不显示下拉的数据,没找到为啥 初步判断是label数据有问题

修改之后的写发如下,解决了问题: 

<a-select
    v-model:value="value"
    style="width: 120px"
    :options="list.map(item=>{ return {id:item.id,name:item.id+item.number}})"
    :field-names="{ label: 'name', value: 'id', options: 'children' }"
  >
</a-select> 
 前端添加搜索添加两个设置:
show-search //添加搜索
optionFilterProp='name' //搜索的内容

标签:Vue,name,value,label,item,添加,antd,id,select
From: https://www.cnblogs.com/changyuqing/p/18516157

相关文章

  • (系列十)Vue3中菜单和路由的结合使用,实现菜单的动态切换(附源码)
    说明  该文章是属于OverallAuth2.0系列文章,每周更新一篇该系列文章(从0到1完成系统开发)。   该系统文章,我会尽量说的非常详细,做到不管新手、老手都能看懂。   说明:OverallAuth2.0是一个简单、易懂、功能强大的权限+可视化流程管理系统。友情提醒:本篇文章是属于系......
  • vue2使用vue3语法
    CompositionAPICompositionAPI将是Vue3的核心功能,它具有许多更改和性能改进。我们也可以在Vue2中通过npm插件@vue/composition-api使用它。安装yarnadd@vue/composition-api之后,在入口文件main.js中使用它。importVuefrom'vue'importVueCompositionAPI......
  • vue中封装一个弹窗
    vue3父元素<template><divclass="app"><some-modalv-model:visible="modalVisible"/></div></template><scriptsetup>import{ref}from"vue";importSomeModalfrom"@/compone......
  • (开题报告)django+vue线上自习管理系统论文+源码
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容一、选题背景关于线上自习管理系统的研究,现有研究主要以传统线下自习室管理或单纯的线上学习平台为主,专门针对django+vue技术构建线上自习管理系......
  • Vue学习笔记(十二)
    async与await1.asyncasync作为一个关键字放到声明函数前面,表示该函数为一个异步任务,不会阻塞后面函数的执行async函数里如果有异步过程会等待,但async函数本身会马上返回,不会阻塞当前线程。可以简单认为async函数工作在主线程,同步执行,不会阻塞界面渲染;async函数内部由awai......
  • Vue学习笔记(十一)
    一.Promise1.异步异步:则是将耗时很长的A交付的工作交给系统之后,就去继续做B交付的工作,等到系统完成了前面的工作之后,再通过回调或者事件,继续做A剩下的工作。AB工作的完成顺序,和交付他们的时间顺序无关,所以叫“异步”。2.回调函数当一个函数作为参数传入另一个函数中,......
  • (开题报告)django+vue同城搬家管理系统论文+源码
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容选题背景关于同城搬家管理系统的研究,现有研究主要以传统的搬家服务运营模式为主,专门针对借助django+vue技术构建同城搬家管理系统的研究较少。在......
  • 基于node.js+vue基于Android的在线招聘平台的设计与实现(开题+程序+论文)计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于在线招聘平台的研究,现有研究主要集中在PC端和Web端,如基于B/S架构的在线招聘平台,实现了用户注册、职位发布、简历投递、面试安排等功能12。然而,专门......
  • 基于node.js+vue基于B_S的商务酒店网上预订管理系统(开题+程序+论文)计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于商务酒店网上预订系统的研究,现有研究主要集中在大型连锁酒店的预订系统,如Expedia、Booking.com等,这些系统通常采用C/S(客户端/服务器)架构,提供丰富的......
  • 001 vue.config相关
    constproxyURL=require("./src/common/proxy-config").proxyURL;constbaseURL=require('./src/common/proxy-config').baseURL;constpath=require('path');functionresolve(dir){returnpath.join(__dirname,dir);}module.ex......