Ant Design of Vue select框获取key和name的问题

目录
  • Ant Design of Vue select框获取key和name
    • 我的记录
  • Ant Design Vue使用select出现的问题
    • 1.select下拉菜单滚动条滚动后,自动弹回到顶部
    • 2.下拉列表在局部滚动时不跟随,与select框分离

Ant Design of Vue select框获取key和name

加入label-in-value这个属性

<a-form-item label="分类">
  <a-select
    placeholder="请选择分类"
    style="width: 100%"
    label-in-value
    v-decorator="['knowledgeunit', { rules: [{ required: true, message: '请选择分类' }] }]"
  >
    <a-select-option v-for="(calssitem, index) in classflyData" :key="index" :value="calssitem.Code">
      {{ calssitem.Name }}
    </a-select-option>
  </a-select>
</a-form-item>

获取到的value 就会变成 {key: 1, lable: '名字'} 的形式

获取值的时候可以这样获取

this.addResourceForm.validateFields((err, values) => {
   if (err && this.newChange.length > 0) {
     return
   }
   const saveObj = {}
   saveObj.knowledgeunit = values.knowledgeunit.key // 获取的值
   saveObj.source = values.knowledgeunit.label  // 获取的名称
 })

我的记录

还有一种方法

你如果想获取怎个对象，怎么获取呢？

<a-form-item label="分类">
  <a-select
    placeholder="请选择分类"
    style="width: 100%"
    @change="onChange"
    v-decorator="['knowledgeunit', { rules: [{ required: true, message: '请选择分类' }] }]"
  >
    <a-select-option v-for="(calssitem, index) in classflyData" :key="index" :value="calssitem.Code">
      {{ calssitem.Name }}
    </a-select-option>
  </a-select>
</a-form-item>

加一个onChange方法，根据下标获取对应的对象

 onChange (item) {
   const obj = this.list[item]
   console.log(obj)
 }

Ant Design Vue使用select出现的问题

1.select下拉菜单滚动条滚动后,自动弹回到顶部

解决方法：

a-select-option 使用v-for渲染时，key值不能重复或者为null

2.下拉列表在局部滚动时不跟随,与select框分离

解决方法：

<a-select
:getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode || document.body;}" 
>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • ant-design-vue中的select选择器,对输入值的进行筛选操作

    今天在设计一个标签(采用的是Select 选择器中的标签那一个)时,从后台返回了数据,但是在输入值时,没有对回显的值进行过滤匹配,通过查看官方文档,解决了这个问题. 记在这里方便以后查看. <a-form-item label='标签' v-bind="formItemLayout"> <a-select mode="tags" :allowClear="true" :filterOption="filterOptio

  • 解决ant Design中Select设置initialValue时的大坑

    我出现的问题:例如在编辑活动关联红包的时候,需求是select显示的是红包名称,但是表单提交的时候是红包ID:设置默认值的initialValue为Id的时候,会出现显示是id (需要的是显示名称):如果设置默认值initialValue是名称,那么下一步操作会出现报错 但是我还有一种情况:某个活动关联的红包被删除了,在Select中的可供选项中redPackets没有这个红包的时候,显示的会是红包id,而不是红包名称 错误效果图: 期待正确效果图 解决方案:在默认值的后面加上一个空字符串进行转

  • ant-design-vue 快速避坑指南(推荐)

    ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库,它其实是Ant Design的Vue实现,组件的风格与Ant Design保持同步,组件的html结构和css样式也保持一致. 用下来发现它的确称得上为数不多的完整的VUE组件库与开发方案集成项目. 本文主要目的是总结一些开发过程中比较耗时间去查找,文档中没有具体说明的常见问题,同时希望能给新上手此框架的同学提供一些参考作用. 1.Table对接后台返回数据 针对Table数据格式与后他接口返回数据格

  • Ant Design of Vue select框获取key和name的问题

    目录 Ant Design of Vue select框获取key和name 我的记录 Ant Design Vue使用select出现的问题 1.select下拉菜单滚动条滚动后,自动弹回到顶部 2.下拉列表在局部滚动时不跟随,与select框分离 Ant Design of Vue select框获取key和name 加入label-in-value这个属性 <a-form-item label="分类">   <a-select     placeholder=

  • Ant Design of Vue的树形控件Tree的使用及说明

    目录 基本使用 配置项 异步加载数据 事件 进阶使用 目录树 右键菜单树 可搜索的树 高阶使用 添加树节点 总而言之 基本使用 配置项 replaceFields 数据渲染属性依赖3个字段: title key children 没有其他可携带的用户数据 对接实际后台返回的数据,很多时候不是直接的title.key可以让我们直接渲染,这个时候replaceFields 就派上了用场. 举栗: :replaceFields="{ title: 'buildingName', key: 'build

  • ant design vue的form表单取值方法

    ant design vue的form表单取值方法

    目录 ant design vue的form表单取值 官方中有以下两种取值方式 ant design of vue 学习之表单form v-decorator(表单验证,内置绑定,初始值) 数据获取与填充 表单实例 ant design vue的form表单取值 官方中有以下两种取值方式 因为不是很熟悉,所以还是查了文档找了一下使用方式,刚开始查到的文档是这样写的 然后返回了undefined,后来又查询了一些文档,发现我多加了一个props属性,然后使用第二个方法成功了,代码如下: ant d

  • 解决ant design vue 表格a-table二次封装,slots渲染的问题

    目的就是对a-table进行二次封装,但是在如何显示a-table的slot时遇到了问题,原本想法是在a-table内把$slots都渲染,期望在使用该组件时能正确渲染,然而...并不会正确渲染 <template> <a-table bordered :scroll="{ x: scrollX, y: 600 }" v-bind="{...$attrs, ...$props, ...{dataSource: body, columns: header}}&

  • ant design vue中日期选择框混合时间选择器的用法说明

    首先时间格式化用到moment方法,需要在页面中引入moment组件 import moment from 'moment' 结构代码: <a-date-picker style="width:100%" :getCalendarContainer="(triggerNode) => triggerNode.parentNode" format="YYYY-MM-DD HH:mm:ss" v-decorator="[ 'pu

  • Ant design vue中的联动选择取消操作

    项目中会遇到需求就是table表格中选中在侧边展示,侧边删除,table中选中取消的联动选中 ui框架:Ant design vue 组件:table 和 tag html中 <template v-for="tag in dataType"> <!-- key不能使用index --> <a-tag :key="tag.id" closable :afterClose="() => deleteDataType(tag

  • 使用Vue+Django+Ant Design做一个留言评论模块的示例代码

    1.总览 留言的展示参考网络上参见的格式,如掘金社区: 一共分为两层,子孙留言都在第二层中 最终效果如下: 接下是数据库的表结构,如下所示: 有一张user表和留言表,关系为一对多,留言表有父留言字段的id,和自身有一个一对多的关系,建表语句如下: CREATE TABLE `message` ( `id` int NOT NULL AUTO_INCREMENT, `date` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, `content` text

  • ant design vue嵌套表格及表格内部编辑的用法说明

    实现效果: 因为pro手脚架中封装的s-table不支持expand和expandedRowsChange事件,无法实现根据展开节点获取其内部数据的需求,因此直接使用a-table组件 表格外层可以翻页,查询携带页码参数 <a-table size="default" rowKey="dict_id" //根据自己数据内部关键针设定 ref="table" @expandedRowsChange="expandedRowsChan

  • vue ant design 封装弹窗表单的使用

    vue ant design 封装弹窗表单的使用

    目录 vue ant design 封装弹窗表单 使用ant-design-vue的Form表单 使用脚手架新建项目 安装并导入ant-design-vue,使用Form组件 启动应用,测试验证 vue ant design 封装弹窗表单 <template> <div id="formForm"> <a-modal :visible="true" :title='title' @ok="handleOk('ok')"

随机推荐