使用ant-design-vue的select组件双向绑定的值返回为options的下标值的问题

最新推荐文章于 2023-08-22 17:02:57 发布
最新推荐文章于 2023-08-22 17:02:57 发布
阅读量4.9k 收藏 2
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SharaSwift/article/details/105178515
版权

是这样的，有一个表单，里面有很多的输入框，下拉列表，这些输入或选择的值我都需要获取到并且在提交表单的时候去传值。所以选择了将这些所有的输入或选择的值都双向绑定给一个params的一个对象。

但是，我这个表单有一个要求是，除开正则匹配，需要全部填写完毕，提交按钮才能点击，所以提交按钮设置了一个disabled，而这个disabled是在computed里面去监听的。

所以，这里就需要在选择的时候将被选择的值改为我们要传递的title的值，而不是下标的值。

解决：

最低0.47元/天 解锁文章
SharaSwift
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
ant-design-vue-pro：像Pro一样使用Ant Design Vue！
02-05
蚂蚁设计Vue Pro 适用于企业应用程序的即用型UI解决方案，作为Vue样板。 基于 预览： ： 主页： ： 文档： : 变更日志： : 常见问题解答： ： 总览 环境和依赖 节点 纱 网络包 埃斯林特 @ vue / cli〜3 -Vue...
vue中v-model对select的绑定操作
10-14
主要介绍了vue中v-model对select的绑定操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
ant design vue select
m0_57233667的博客
07-25 401
antd VUE select
ant-design-vue select 使用汇总
樊小书生
08-23 1万+
最近使用ant-design-vue，在使用select的时候遇到一些特殊情况，特此做一下整理汇总。 首先实例中的下拉选中为： const options = [ { name: '北京', id: '00001', spell: 'beijing', simpleSpell: 'bj' }, { name: '上海', id: '00002', spell: 'shanghai', simpleSpell: 'sh' },
ant design of vue Cascader 级联选择回显及传值
weixin_46055718的博客
08-22 2096
事件函数中被激发的属性，可以用它获取到选中数据所带的所有值。拿到cascader选中的那一条数据所对应的所有值可以用。
antdesign搜索选择框select,需求：展示与真正取值不一致时的处理
weixin_45798022的博客
07-18 1959
antdesign搜索选择框select,需求：展示与真正取值不一致时的处理
vue_ant-design-vue菜单递归
12-28
通过以上步骤，我们就能够处理后台返回的无限层级菜单数据，并在前端使用Ant Design Vue的菜单组件进行展示。在实际应用中，你可能还需要结合路由管理（如Vue Router）和权限控制（根据用户角色动态过滤菜单项）等...
基于 vue、ant-design-vue 的自定义Antdv 工作流组件
06-26
本项目“基于vue、ant-design-vue的自定义Antdv工作流组件”就是一个这样的解决方案，旨在提供一个高度可定制、功能丰富的Web工作流平台。 首先，我们要理解Vue.js，它是一个轻量级的前端框架，以其易学易用、高效...
基于 vxe-table 表格的适配插件，用于兼容 ant-design-vue 组件库
最新发布
05-28
npm install vxe-table@next vxe-table-plugin-antd@next ant-design-vue@next // ... import VXETable from 'vxe-table' import VXETablePluginAntd from 'vxe-table-plugin-antd' import 'vxe-table-plugin-antd/...
解决Ant Design Vue的select搜索框只能搜索value
aixuanxuan的博客
07-16 7985
在使用a-select的搜索框功能时, 默认搜索的是options的value值 例如: <a-select show-search> <a-select-option value="one">选项1</a-select-option> <a-select-option value="two">选项2</a-select-option> <a-select-option value="three">选项3</a-sele.
antd-vue a-select 使用v-model赋值之后无法选择其它option
Nio的博客
02-01 5156
今天在帮同事解决问题的时候遇到的 进入页面后通过v-model对下拉框赋值 赋值成功了之后，当选择其它option时，值始终不改变，显示的依然是进入页面后绑定的值，也没有异常信息。 排查之后发现是因为在data中，只定义了queryParam并没有定义下面的nameMaVehcle这个key 将nameMaVehicle声明出来以后就解决了。 ...
ant design vue选择器select的使用（详细）
热门推荐
weixin_45745641的博客
08-11 1万+
概要 这次是写一个基于ant design vue的社团招新小程序的后台，因为涉及成员的三种状态描述（不/通过，待定），所以在此使用select进行实现，并且点击下拉框选择会触发对应的函数，更改数据库的数据反映到小程序端。今天那就来讲讲select的使用以及对应触发函数的绑定，先看一下实现的效果图： 具体实现过程： 写好前端样式 对于组件的使用我们可以先去官网文档找到自己想要实现的效果（官方文档传送门），这次我们使用获得选项文本的样式，然后改变参数，写成我们自己想要的效果 看一下 a-select 中的
Vue中select默认选中下拉选项第一条（举例iview AutoComplete组件）
heerey525
12-25 8987
一、html中 静态 给对应option元素直接添加selected属性<select> <option value="0">one</option> <option value="1">two</option> <option value="2" selected>three</option> </select> 动态 option加载完成后给对应元素添加selected属性$("selec
antd-design-vue select change事件传递自定义参数
qq_39032149的博客
01-18 3653
antd-design-vue select选择器自定义传参
vue里面的el-select绑定默认值
weixin_45048360的博客
03-17 8597
vue select下拉框绑定默认值： 首先option要加value值，以便v-model可以获取到对应选择的值 一、当没有绑定v-model，直接给对应的option加selected属性 二、当给select绑定了v-model的值的时候，要给v-model绑定的data值里写默认值 ...
el-select组件与父组件实现双向数据绑定
yaoduqu的博客
07-11 1910
封装成组件的下拉框如何与父组件实现双向数据绑定？ 之前的做法： 下拉框组件 <template> <el-select v-model="curFruit" @change="change"> <el-option v-for="(item,index) in fruits" :key="index" :label="item.label" :value="item.value" ></el-opt
ant design + vue 获取下拉菜单选中的option对象或者option的指定属性值；antdesign；select
Sunny_lxm的博客
11-09 2560
ant design + vue 获取下拉菜单选中的option对象或者option的指定属性值
ant design vue a-select 下拉搜索
nzdwancgb的博客
11-28 3524
<a-select v-model:value="searchCondition.lj" show-search // 开启下拉搜索 optionFilterProp="label" // 用label属性过滤。默认是value过滤 style="width:250px;" > <a-select-option value...
怎么使用ant-design-vue的Tree组件的select事件返回被选中节点的自定义属性值
07-15
要使用 ant-design-vue 的 Tree 组件的 select 事件返回被选中节点的自定义属性值，您可以按照以下步骤进行操作： 1. 首先，确保已经安装了 ant-design-vue 组件库，并在项目中引入了相关的样式和组件。 2. 在需要使用树组件的页面中，引入 Tree 组件： ```vue <template> <div> <a-tree :tree-data="treeData" :default-expanded-keys="expandedKeys" :selectable="true" @select="handleTreeSelect" ></a-tree> </div> </template> <script> import { Tree } from 'ant-design-vue'; export default { components: { 'a-tree': Tree, }, data() { return { expandedKeys: [], // 用于存储展开的节点的 key 值 treeData: [ // 树节点数据 // ... ], }; }, methods: { handleTreeSelect(selectedKeys, { node }) { // 处理选中节点变化的逻辑 const customData = node.data // 获取节点的自定义属性值 console.log('Selected keys:', selectedKeys); console.log('Custom data:', customData); }, }, }; </script> ``` 3. 在 `data` 中定义 `expandedKeys` 数组，用于存储展开的节点的 key 值。 4. 在 `treeData` 中定义树节点的数据，您可以根据实际需求自行配置。 5. 将 `selectable` 属性设置为 `true`，开启节点的选择功能。 6. 在 `@select` 事件中，通过 `handleTreeSelect` 方法处理选中节点变化的逻辑。通过解构赋值，获取 `node` 参数，该参数包含了选中节点的相关信息。您可以从 `node.data` 中获取节点的自定义属性值。 这样，您就可以在使用 ant-design-vue 的 Tree 组件的 select 事件中获取被选中节点的自定义属性值了。希望能帮到您！如果还有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值