iview on-change用法

2023-11-18

原地址:https://segmentfault.com/q/1010000011589626

iview框架select选择框on-change事件如何返回当前选中的值?

这是文档中的解释:
on-change 选中的Option变化时触发,默认返回 value,如需返回 label,详见 label-in-value 属性

这里如何绑定该事件获取到当前选中值的索引呢?

找到解决方法了:
1、只获得value,
在select组件上绑定@on-change="selectChange" 方法
在methods中该方法要传入参数value,然后输出value即可获取到value值。
如果想要获取索引,可以把索引绑定在option的label上,并且在select上加:label-in-value=true,最后会连label一起返回一个对象。

{
    value:'111',
    label,"aaa"
}

 2、可以传递多个参数
如果传递多个参数,需要把当前选中的参数也传进去,@on-change="selectChange($event,a,b)" 
$event就是当前选中的值,a,b是另外两个参数。

<Select v-model="status" style="width:160px;height:30px;" @on-change='change_status(status)'>
            <Option v-for="item in status_list" :value="item.id" :key="item.value" >{{ item.name }}</Option>
</Select>

然后在script中的
methods:{

change_status(){  // 筛选状态
    console.log(this.status)
},

}

这就能输出你的值了

记住用@on-change 不要用‘:’ 会造成死循环

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

iview on-change用法 的相关文章

  • python opencv 调用摄像头失败问题的解决 Windows

    省流 内含 Python Opencv 双目相机拍照代码 手动 or 自动 可自取 如果你的 cv2 VideoCapture 函数卡住但不报错 打开 Windows 相机 应用可以正常看到摄像头画面 且能够正常用 cv2 imshow 打
  • Vue自定义指令 传递参数

    在项目开发过程中 难免会遇到各种功能需要使用Vue自定义指令 directive 去实现 关于directive的使用方式这里就不做过多的介绍了 Vue官方文档中说的还是听明白的 今天讲讲在使用Vue自定义指令过程中 1 怎么数据传递到自定
  • [电路设计]按键方案

    电路设计 按键方案 本文记录和介绍几种按键解决方案 包括普通按键 按键编码电路 ADC按键的工作原理 1 普通按键 一般使用的按键原理图如下图所示 由按键 上拉电阻和消抖滤波电容组成 按键断开时 K e y I i n
  • Java实现多附件的邮件发送

    叙 本文主要记述了 Springboot 中如何集成并实现多附件的邮件发送 以QQ邮箱的服务器为发送邮件的邮件服务器 Java实现多附件的邮件发送 1 前期准备 1 1 获取收发服务器地址及其端口号 1 2 授权码的获取 2 代码 2 1
  • Python实现子线程代码“同时”执行完毕后,再执行后续函数模块

    在python中用多线程完成任务时 在后面添加了一个提醒函数 结果发现线程开启后提醒函数就触发了 解决方法 将多线程join 起来 就会跑完所有多线程任务再执行后续的函数模块 join 的使用方法 import threading impo
  • 个人笔记随记——在CSDN写随记原因,部分是为了自己复习,查看。

    在CSDN写随记原因 部分是为了自己复习 查看 部分原因是用来分享经验 大家共同进步 之前我的几个电脑里面有个自己的个人数据库 所以笔记都在那里记录 因为现在除了码字 经常不携带电脑 导致笔记不能随时观看 所以现在即在CSDN开了个人博客
  • Jupyter Notebook导入和删除虚拟环境

    在Jupyter Notebook中加载虚拟环境 比如现在我创建了一个虚拟环境名为pytorch 那么首先我先进入虚拟环境 activate pytorch Linux下需要使用source activate 然后运行 conda inst
  • Python相关-使用中遇到的问题和解决方法

    record 1 将 py文件 Python源程序 转换为 exe文件 可执行文件 2 Python如何调用方法 3 交换变量值可以不用第三个变量 4 反斜杠和长字符串 5 while循环 6 数字 小数以浮点数存储 7 数字运算 8 bo
  • 利用Hbuilder将Vue项目打包成apk

    一 配置config index js 本人没有配置index js文件 就开始进行了打包 结果最终效果是页面空白 解决了空白 接着底部图标 我是用的阿里巴巴图片 资源找不到 所以配置这步比较重要 1 页面空白的解决 打开config in
  • vue更换主题设置主题

    1 创建一个后缀为 scss文件将下述代码放进去 将scss文件引入main js中 如果引入报错可以网上搜一下 很多 root bg white color fff bg pink color pink bg black color 37
  • vue.config.js

    use strict const path require path function resolve dir return path join dirname dir const CompressionPlugin require com
  • mac 如何安装hp laserjet m1136驱动

    直接在苹果的官网下载驱动就可以了 要下V5 1的那个版本https support apple com kb DL1888 viewlocale zh CN locale zh CN 选择系统偏好设置中的打印机 然后选择相对应的版本就可以了
  • android studio 华为手机真机测试

    手机的开发人员选项打开 USB 调试打开 在拨号界面输入 2846579 进入测试菜单界面 然后 Project Menu 后台设置 LOG设置 LOG 开关 LOG 打开 LOG 级别设置 VERBOSE Dump Log 全部选中 重启
  • 解决 Fedora 下部分网页不能正常打开的问题(Linux 通用)

    使用命令 ifconfig 可以查看本地的网卡信息 ifconfig a 一般以wlp开头的为无线网卡 用 ifconfig XXXX 网卡名可以单独查看某一个网卡的信息 如下所示 wlp0s20f3 flags 4163
  • mongodb显示:‘mongo‘不是内部或外部命令,也不是可运行的程序或批处理文件

    我们在安装完mongodb之后都需要去校验一下是否安装成功 一般都用 mongo 去查看我们的mongodb安装是否成功 正常情况是这样的 但是如果是出现 mongo 不是内部或外部命令 也不是可运行的程序或批处理文件 我们有两个方法去排查
  • 上传新文件项目到svn上

    一 在之前有svn项目的文件夹中检出 这一步主要是为了获得svn的仓库地址 二 在一个之前有的svn项目里面右键tortoiseSvn gt 版本库浏览器 就会出现这样的界面 然后在这个界面里右键里选择加入文件夹 选择本地的文件夹就可以了
  • bin目录下存放的是什么文件?

    bin文件夹通常里面都是什么文件 经常使用电脑系统安装程序的朋友可能会发现 很多软件在安装后都会产生一个bin文件夹 那么bin文件夹是什么 里面大多放着什么文件呢 下面我们来学习一下 避免一些错误的认知导致程序损坏等误操作 软件的安装后文
  • Python中安装pandas出现问题总结

    1 安装pandas总报超时 这个方法一般都能解决问题 解决方法 pip install 包名 i http pypi douban com simple trusted host pypi douban com 这个是因为你下载的包不对
  • win10 win11 远程连接 凭据不工作 无法建立连接

    Windows 远程连接 远程连接个人或者学校电脑 Windows系统 时经常遇到无法连接的情况 本文结合两种情况给出相应解决方法 No 1 问题描述 无法建立连接 未知连接错误 解决方法 查看目标ipv4地址是否正确 在windows W
  • typescript 使用对象或数组的值或键创建联合类型

    前言 实际开发中我需要用到太多的键值对 并且有相当一部分情况下 键名是一个联合 而且还是某个数组的联合 然而早期 TS 对这样的联合实现并不是很理想 这几天又翻了翻 Stack Overflow 发现很多新答案 对此整理一下 后面的内容最主

随机推荐

  • docker常用的Linux命令

    docker 帮助 docker h 查看镜像 docker images 查看容器 docker ps 进入容器 docker exec it web 容器id的前几位或容器名 bin bash 有些地方是bash 具体地方具体定 退出容
  • Cesium教程 (3) 矢量切片mvt-imagery-provider加载

    Cesium教程 3 矢量切片mvt imagery provider加载 目录 0 矢量切片 1 开源项目 2 环境 3 代码 4 进阶 5 TODO 0 矢量切片 WMTS 加载最快 图片格式 样式固定 WMS 加载数量大则慢 但可以点
  • VScode项目中文件后面的A/U/M...是什么意思?

    问题 VScode项目中文件后面的A U M 是什么意思 回答 git 添加过该文件 然后你对这个文件进行了修改 就会文件后标记M M modified 你在本地新建了这个文件 还未提交到 git 上 就会标记文件或没有被合并 你需要完成合
  • rocksd mysql_mysql rocksdb使用报告

    作者 某网盘DBA 转发已经过作者同意 如果有其他问题请及时联系 非经过允许请勿随意转发 尊重版权 感谢 背景 rocksdb是facebook基于google的leveldb二次开发的key value存储引擎 目前 facebook已将
  • cenos 6.4 安装memcached 服务端

    本文查考借鉴 yum 安装memcached 前提 阿里云 EDS 服务器 操作系统 CentOs 6 4 第一步 查询memcached 安装资源包信息 yun search memcached 该指令可以查询yum库中 所包含memca
  • Centos 安装Vsftpd

    1 安装VSFTP 1 root localhost yum y install vsftpd 2 配置vsftpd conf文件 root localhost vi etc vsftpd vsftpd conf 001 002 003 0
  • tkinter绘制组件(12)——表格

    tkinter绘制组件 12 表格 引言 构思 外观 绘制方法 布局 函数结构 绘制表头 绘制表格内容 获取高度和重绘 完整代码函数 效果 测试代码 最终效果 2021 12 12新样式 2022 1 2新样式 2022 7 3新功能 补充
  • 知识图谱实现步骤和用到的方法

    PDF 下载 https download csdn net download nrlovestudy 10938925 参考资料 1 知识图谱入门 一 知识图谱与语义技术概览 https blog csdn net pelhans art
  • 【CSS】background相关属性深入学习

    最近一次需求中对于background相关的一些属性使用较多 总结下 希望提高下次的开发效率 background属性 background color background image background position backgr
  • .NET面试题——第7篇 C#类和对象

    1 什么是类和对象以及关系 对象 一种具有状态 属性 和行为 方法 的编程实体 用于描述现实世界的某个具体事物 类 具用一系列对象共同特征和行为的通用类型 对象和类的关系 类是对象的抽象 而对象是类的具体实例 类是抽象的 不占用内存 而对象
  • go爬虫框架colly的精简讲解

    1 拉取软件包 go get github com gocolly colly 2 创建colly的收集器 colly NewCollector 可以在创建的时候进行配置 c colly NewCollector colly AllowUR
  • Java 断点调试 循环调试

    java断点调试 以eclipse为例 1 基础调试 这里都是一些基础 除了最后一个都十分常用 名称 快捷键 作用 Resume F8 运行至下一断点 Step Into F5 进入方法 Step Over F6 运行完当前语句 User
  • PCL 点云按高程渲染颜色

    目录 一 算法原理 二 代码实现 三 结果展示 四 CloudCompare 五 备注 一 算法原理 首先按照Z轴方向求取所在点云的高程极值 包括高程最大值与最小值 计算高程中值 然后选取渲染的红 绿 蓝三种颜色的值 最后 自上而下 为红绿
  • NBA的字母哥如何拿到2415万美金年薪

    前言 NBA是世界上最成功的体育联盟之一 为了制定合理的运作规范 联盟会与球员工会签署劳资协议 协议里规定了球队的工资帽 一支球队球员工资总额的上限 顶薪 球员薪水的上限 底薪 球员的最低薪水 和其他规范 2011年 经历了停摆事件 联盟和
  • 一张图理清ASP.NET Core启动流程

    1 引言 对于ASP NET Core应用程序来说 我们要记住非常重要的一点是 其本质上是一个独立的控制台应用 它并不是必需在IIS内部托管且并不需要IIS来启动运行 而这正是ASP NET Core跨平台的基石 ASP NET Core应
  • JS 数组定义及详解

    一 数组简介 1 什么是数组 数组是值的有序集合 每个值叫做元素 每个元素在数组中都有数字位置编号 也就是索引 JS中的数组是弱类型的 数组中可以含有不同类型的元素 数组元素甚至可以是对象或其他数组 例如 var arr 1 true nu
  • kubernetes运维---calico之ipip模式抓包分析

    一 calico介绍 Calico是Kubernetes生态系统中另一种流行的网络选择 虽然Flannel被公认为是最简单的选择 但Calico以其性能 灵活性而闻名 Calico的功能更为全面 不仅提供主机和pod之间的网络连接 还涉及网
  • 功能实现:Unity中一个动画,只播放中间指定的一截,而且循环播放

    一 要播放的动画 直播中间一截 如图 总的动画为长度为2分钟零8秒 二 Button和对应事件 三 事件的代码 在Start 里面绑定 private void Awake myAnim animGo GetComponent
  • Flutter实现app自动升级

    话不多说 有过开发过移动应用的人都应该自动升级流程 首先获取本地应用版本 然后从服务器获取线上移动应用版本号作比较是否升级 第一步获取版本信息 API https pub dev packages package info 获取应用版本号
  • iview on-change用法

    原地址 https segmentfault com q 1010000011589626 iview框架select选择框on change事件如何返回当前选中的值 这是文档中的解释 on change 选中的Option变化时触发 默认