【vue】使用uni-indexed-list组件点击获取下标详情

news2024/9/22 21:31:23

问题描述

使用uniapp自带的uni-indexed-list组件,点击索引只能获取到点击的名称,不能获取其他信息
在这里插入图片描述


解决方案:

uni-indexed-list组件1.2.1版本
对uni-indexed-list组件代码进行修改,示例如下:
在这里插入图片描述
找到setList函数,对内部逻辑赋值就行了修改
在这里插入图片描述
传值给uni-indexed-list组件就得修改为一下格式:

#组件
<uni-indexed-list :options="list" :show-select="false" @click="handleBindClick" />

#值
let list = ref([{
  'letter': 'A',
  'data': [
    {
      name:"阿克苏机场",
      value:"1",
    },
    {
      name:"澳门国际机场",
      value:"6",
    }
  ]
}]) 

#函数
const handleBindClick = (e: any) => {
  console.log(e,"沉默小管");
}

点击后效果
在这里插入图片描述

踩坑不易,还希望各位大佬支持一下 \textcolor{gray}{踩坑不易,还希望各位大佬支持一下} 踩坑不易,还希望各位大佬支持一下

📃 个人主页: \textcolor{green}{个人主页:} 个人主页: 沉默小管

📃 个人网站: \textcolor{green}{个人网站:} 个人网站: 沉默小管

📃 个人导航网站: \textcolor{green}{个人导航网站:} 个人导航网站: 沉默小管导航网

📃 我的开源项目: \textcolor{green}{我的开源项目:} 我的开源项目: vueCms.cn

🔥 技术交流 Q Q 群: 837051545 \textcolor{green}{技术交流QQ群:837051545} 技术交流QQ群:837051545

👍 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

如果有不懂可以留言,我看到了应该会回复
如有错误,请多多指教

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/713835.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

二叉树 — 多叉转二叉树

题目&#xff1a; 将一棵多叉树&#xff0c;转换成二叉树&#xff0c;在通过这个二叉树还原成多叉树。 分析 毫无疑问&#xff0c;多叉树的头结点也是转换的二叉树的头结点。 多叉树如下图所示&#xff1a; 转换成二叉树&#xff0c;则将多叉树所有的节点X&#xff0c;将X的孩…

MATLAB导入EXCEL表格数据画散点图

namexxxx.xlsx;%这里的xxxx是EXCEL文件的名字&#xff0c;而且需要将它和.m文件放在同一个文件夹下 axlsread(name,D2:D25); aa; bxlsread(name,I2:I25); bb; x[a,b]; cxlsread(name,E2:E25); cc; dxlsread(name,J2:J25); dd; y[c,d]; plot(x,y,b-o),grid on;%b-o是颜色和图案&…

linux 内核接口atomic_long_try_cmpxchg_acquire/release详解

linux 内核接口atomic_long_try_cmpxchg_acquire详解 1 atomic_long_try_cmpxchg_acquire/release1.1 atomic_long_try_cmpxchg_acquire1.2 atomic_long_try_cmpxchg_release 2 arch_atomic64_cmpxchg_acquire/release2.1 arch_atomic64_cmpxchg_acquire/release定义2.2 atomic…

移远通信携手中国电信等伙伴重磅发布5G NTN试验成果,共促卫星物联网产业发展

6月29日&#xff0c;在MWC上海展期间&#xff0c;以“5G云网新科技 数字经济新动能”为主题的2023中国电信5G/6G科技创新成果发布会顺利举行。 会上&#xff0c;中国电信联合合作伙伴重磅发布了多项科技创新成果和科技创新应用&#xff0c;作为中国电信在卫星物联网领域重要的合…

ArcGIS SDE空间数据库 镶嵌数据集白边压盖及不显示问题

首先&#xff0c;在Oracle SDE空间数据库中新建了镶嵌数据集(Mosaic Dataset) &#xff0c;这里通过程序导入影像数据以后出现了 影像不显示&#xff08;得放到很小比例尺才显示&#xff09;及影像之间互相压盖 第一&#xff0c;解决影像互相压盖问题 在Calalog中右键镶嵌数据…

操作系统6——文件管理

本系列博客重点在深圳大学操作系统课程的核心内容梳理&#xff0c;参考书目《计算机操作系统》&#xff08;有问题欢迎在评论区讨论指出&#xff0c;或直接私信联系我&#xff09;。 梗概 本篇博客主要介绍操作系统第七章文件管理和第八章磁盘储存器的管理的相关知识。 目录 …

智谱AI-算法实习生(知识图谱方向)实习面试记录

岗位描述 没错和我的经历可以说是match得不能再match了&#xff0c;但是还是挂了hh。 面试内容 给我面试的是唐杰老师的博士生&#xff0c;方向是社交网络数据挖掘&#xff0c;知识图谱。不cue名了&#xff0c;态度很友好的 &#xff0c;很赞。 date&#xff1a;6.28 Q1 自…

【算法之双指针I】leetcode344.反转字符串

344.反转字符串 力扣题目链接 编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。 不要给另外的数组分配额外的空间&#xff0c;你必须**原地修改输入数组**、使用 O(1) 的额外空间解决这一问题。 输入&#xff1a;s ["h…

【代理服务器】Squid代理服务器应用

目录 一、Squid代理服务器1.1代理的工作机制1.2代理服务器的概念1.3代理服务器的作用1.4Squid 代理的类型 二、安装Squid服务2.1编译安装Squid2.2修改 Squid 的配置文件2.3Squid运行控制2.4创建Squid服务脚本2.5 构建传统代理服务器2.6更改防火墙规则2.7验证 三、构建透明代理服…

Keil MDK 5 仿真STM32F4报错no ‘read‘ permission

问题描述 MDK软件模拟仿真提示没有读写权限&#xff0c;只能单步运行。error提示&#xff1a; *** error 65: access violation at 0x40023C00 : no read permission 关于Keil MDK 5 仿真STM32F4报错no ‘read’ permission的解决方法 Vision 调试器为所有 ARM7、ARM9、Corte…

怎样在文章末尾添加尾注(将尾注的数字变为方括号加数字)

在进行文章编写或者需要添加注解时&#xff0c;需要进行尾注的添加&#xff0c;下面将详细说明如何进行尾注的添加 操作 首先打开需要进行添加尾注的文档&#xff0c;将光标移动至需要进行添加尾注的文字后。 紧接着在上方工具栏中&#xff0c;选择引用&#xff0c;在引用页…

4.FreeRTOS系统配置文件详解(FreeRTOSConfig.h)

目录 一、基础配置选项 二、内存分配相关定义 三、钩子函数的相关定义 四、运行时间和任务状态统计相关定义 五、软件定时器相关配置 FreeRTOSConfig.h配置文件的作用&#xff1a; 对FreeRTOS进行功能配合和裁剪&#xff0c;以及API函数的使能 对于FreeRTOS配置文件主要…

如果制作投票选举投票制作制作一个投票在线制作投票

用户在使用微信投票的时候&#xff0c;需要功能齐全&#xff0c;又快捷方便的投票小程序。 而“活动星投票”这款软件使用非常的方便&#xff0c;用户可以随时使用手机微信小程序获得线上投票服务&#xff0c;很多用户都很喜欢“活动星投票”这款软件。 “活动星投票”小程序在…

CORS如何实现跨域(前端+后端代码实例讲解)

书接上回&#xff0c;上一篇文章讲解了用 jsonp 来解决跨域问题&#xff0c;这篇文章讲解另外一种方法也可以解决跨域问题&#xff0c;那就是CORS&#xff08;跨源资源共享&#xff09;。 什么是CORS&#xff1f; 下面是官方的解释&#xff1a;跨源资源共享&#xff08;CORS&a…

刚去了家新公司,发现个个都是卷王 , 想离职了。。

个个都说想躺平了&#xff0c;可是有一说一&#xff0c;该卷的还是卷。这不&#xff0c;前段时间我们公司来了个00后&#xff0c;才工作一年&#xff0c;跳槽到我们公司起薪15K&#xff0c;都快接近我了。后来才知道人家是个卷王&#xff0c;从早干到晚就差搬张床到工位睡觉了。…

性能测试什么时候开始?性能测试流程介绍

目录 性能测试什么时候开始? 一、制定性能测试目标 二、性能测试场景获取 三、性能测试数据确定 四、性能测试用例设计 五、性能测试环境准备与搭建 六、做脚本 七、跑场景 八、做监控 九、分析调优 十、回归测试 十一、出图写报告 总结&#xff1a; 性能测试什么…

STM32——建工程

文章目录 一、建工程步骤1. 创建一个工程文件2. 里面创建四个文件3. Lib&#xff1a;存放标准库的.c和.h文件&#xff0c;其中inc放置.h文件&#xff0c;src放置.c文件4. Startup中存放驱动文件5.User文件中包含以下路径以下文件6.创建工程Project 一、建工程步骤 以STM32F10X…

若依不分离,弹层自定义按钮

记录下遇到的两种情况 第一种&#xff1a;点击按钮&#xff0c;打开第三方链接去支付&#xff0c;因为只需要显示一个关闭按钮 代码&#xff1a; // 表格操作列 {title: 操作,align: center,formatter: function (value, row, index) {var actions [];if (row.status1) {acti…

NAMD分子动力学模拟在生物及材料计算中的应用专题

第一天 时间 :第一天上午 内容:一&#xff1a;分子动力学相关软件及Linux入门 目标&#xff1a;了解NAMD软件&#xff0c;掌握NAMD安装环境&#xff0c;了解Linux语言 二&#xff1a;VMD可视化软件的安装和使用 三&#xff1a;研究对象模型获取&#xff0c;构建以及优化 主要…

7-WebApis-5

Web APIs - 5 目标&#xff1a; 能够利用JS操作浏览器,具备利用本地存储实现学生就业表的能力 BOM操作综合案例 js组成 JavaScript的组成 ECMAScript: 规定了js基础语法核心知识。比如&#xff1a;变量、分支语句、循环语句、对象等等 Web APIs : DOM 文档对象模型&#xff…