mint-ui Picker 显示异常
mint-ui Picker 显示异常
现象
最近一个老项目页面显示异常,使用mint-ui Picker显示异常,直接显示成了 数据对象,而不是具体travelName 字段

组件
mint-ui Picker
使用方式(vue方式)
// template
<mt-picker :slots="slots" value-key="name" :itemHeight="40" :visibleItemCount='3'
></mt-picker>// js
data(){return {slots: [{"flex": 1,"values": [{"travelNo": "","travelName": "","travelId": "1",}],"className": "slot1","textAlign": "center","defaultIndex": 0,"valueIndex": 0}]}
}
导致错误原因
Picker 组件 value-key 为 travelName,
slots 字段中 travelName 字段为空,导致渲染,直接渲染了这一条数据
{"travelNo": "","travelName": "","travelId": "1",
}
我们来看看 picker-slot 源码是怎么渲染的
具体渲染如下
- 先判断当前 itemValue 是否为对象
- 是对象 ,使用 itemValue[valueKey],且字段有值 并且不为数字0,则渲染 itemValue[valueKey],否则为 渲染 itemValue(valueKey即为传入的travelName)
- 不是对象 直接使用 itemValue
{{ typeof itemValue === 'object' && itemValue[valueKey] ? itemValue[valueKey] : itemValue }}
【注】:picker-slot 源码
<template><div class="picker-slot" :class="classNames" :style="flexStyle"><div v-if="!divider" ref="wrapper" class="picker-slot-wrapper" :class="{ dragging: dragging }" :style="{ height: contentHeight + 'px' }"><div class="picker-item" v-for="itemValue in mutatingValues" :class="{ 'picker-selected': itemValue === currentValue }" :style="{ height: itemHeight + 'px', lineHeight: itemHeight + 'px' }">{{ typeof itemValue === 'object' && itemValue[valueKey] ? itemValue[valueKey] : itemValue }}</div></div><div v-if="divider">{{ content }}</div></div>
</template>
相关文章:
mint-ui Picker 显示异常
mint-ui Picker 显示异常 现象 最近一个老项目页面显示异常,使用mint-ui Picker显示异常,直接显示成了 数据对象,而不是具体travelName 字段 组件 mint-ui Picker 使用方式(vue方式) // template <mt-picker :slots"slots" value-key…...
深入理解 MySQL 中的日志类型及其应用场景
目录标题 MySQL 中的日志类型这么多,它们都有哪些作用?1.错误日志(Error Log)2.事务日志2.1 InnoDB Redo Log(重做日志)2.2 InnoDB Undo Log (撤消日志)3.查询日志(General Query Log)4.慢查询日志 (Slow Query Log)5.二进制日志(Binary Log)6.中继日志 (Relay Log)总结一下M…...
群控系统服务端开发模式-应用开发-上传配置功能开发
下面直接进入上传配置功能开发,废话不多说。 一、创建表 1、语句 CREATE TABLE cluster_control.nc_param_upload (id int(11) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 编号,upload_type tinyint(1) UNSIGNED NOT NULL COMMENT 上传类型 1:本站 2&a…...
stm32——GPIO开发
目录 1、什么是GPIO 2、GPIO的作用 3、GPIO的基本结构 4、GPIO引脚的基本结构 5、GPIO端口模式的配置 1. 输入浮空(Input Floating) 2. 输入上拉(Input Pull-Up) 3. 输入下拉(Input Pull-Down) 4. …...
layui 自定义验证单选框必填
对于输入框类型必填验证,只需要在 input 输入框加入 lay-verify "required" 即可。但对于单选按钮这种特殊的该怎么办呢?layui 为我们提供了自定义验证。 1. 在单选按钮上添加自定义验证的名称 2. 验证规则如下 // 单选框自定义验证form.ve…...
Spring 设计模式之策略模式
Spring 设计模式之策略模式 策略模式构成部分java举例 策略模式 策略模式:允许定义一系列算法,并将每一个算法封装起来,使它们可以互相替换,且算法的变化可以独立于使用它们的客户端。 构成部分 Context(上下文&…...
苹果开发 IOS 证书生成步骤
前提条件 你手上有一台 Macbook你的苹果账号已被添加到开发人员中 证书创建步骤 打开 XCode 直接生成 p12证书生成后,就可在苹果开发者管理界面中看到你的证书记录登录苹果开发中心,创建 profiles 文件,并下载以上步骤即可,就这…...
DDR2 SDRAM(五)初始化
因为DDR2本质上只是更高级的一种SRAM,底层操作原理和SRAM是一样的,所以很多基础的东西就不再赘述了。 一、原理 在初始化之前,DDR2芯片需要先上电,芯片有多个需要提供的电压,其大小和顺序也有要求,这部分…...
Python工具箱系列(五十七)
图像分割与人脸识别 众所周知图像是由若干有意义的像素组成的,图像分割作为计算机视觉的基础,对具有现有目标和较精确边界的图像进行分割,实现在图像像素级别上的分类任务。图像分割可分为语义分割和实例分割两类,区别如下&#x…...
数据智能驱动金融策略优化:民锋智能分析技术的应用
在现代金融市场中,数据分析与智能化技术的结合为投资策略带来了全新机遇。民锋以智能分析技术为核心,帮助投资者在复杂的市场环境中做出高效决策。本文将深入探讨民锋智能分析技术如何驱动策略优化,为投资者带来更加智能化的支持。 #### 一、…...
1009:带余除法
【题目描述】 给定被除数和除数,求整数商及余数。此题中请使用默认的整除和取余运算,无需对结果进行任何特殊处理。 【输入】 一行,包含两个整数,依次为被除数和除数(除数非零),中间用一个空格隔…...
Jmeter实际应用
环境准备 JDK1.8Jmeter 5.6.3 下载地址Jmeter 插件 下载地址 放到lib/ext下 常用命令 # 启动 sh jmeter# 集群模式下启动节点,不启动用不了集群 sh jmeter-server#生成ssl需要的证书, 这里会要求输入个密码,是要在jmeter中用的 keytool -import -ali…...
C++基础(11.AVL树的实现)
目录 AVL的概念: AVL树的实现: AVL树的结构: AVL树的插⼊: 平衡因⼦更新: 旋转: AVL树的其他功能: AVL树平衡检测: 测试代码*2: 源代码: KV结构: 源代码: AVL…...
c# 抽象方法 虚函数 使用场景
在C#中,抽象方法(abstract method)和虚函数(virtual method)都是用于实现多态性(polymorphism)的重要特性,但它们在使用上有一些关键的区别和各自的用途。 抽象方法(Abs…...
大数据安全方案 验证
一、背景 文档用于记录配置 Kerberos 和 Ranger 后,对 HDFS、Hive 认证和鉴权的功能测试。 二、Kerberos 验证 2.1、验证功能 1,HDFS 认证 2.1.1、访问 HDFS Kerberos 验证前,访问 HDFS 失败。 Kerberos 验证后,访问 HDFS 成…...
电脑软件:推荐一款免费且实用的电脑开关机小工具
目录 一、软件简介 二、软件功能 三、软件特点 四、使用说明 五、软件下载 今天给大家推荐一款免费且实用的电脑开关机小工具KShutdown,有需要的朋友可以下载试一下! 一、软件简介 KShutdown是一款精巧且实用的定时自动关机小工具,对于…...
php反序列化靶场随笔分析
项目地址:github.com/mcc0624/php_ser_Class 推荐使用docker部署:https://hub.docker.com/r/mcc0624/ser/tags 前面讲了以下php基础,我们直接从class6开始实验 class6 访问页面,传一个序列化的字符串,php代码将其反…...
动态规划 - 编辑距离
115. 不同的子序列 困难 给你两个字符串 s 和 t ,统计并返回在 s 的 子序列 中 t 出现的个数,结果需要对 10^9 7 取模。 算法思想:利用动态规划,分s[i - 1] 与 t[j - 1]相等,s[i - 1] 与 t[j - 1] 不相等两种情况具…...
力扣——113. 路径总和
113. 路径总和 II 给你二叉树的根节点 root 和一个整数目标和 targetSum ,找出所有 从根节点到叶子节点 路径总和等于给定目标和的路径。 叶子节点 是指没有子节点的节点。 示例 1: 输入:root [5,4,8,11,null,13,4,7,2,null,null,5,1], t…...
C02S04-Ubuntu基本使用
一、Ubuntu初始配置 1. 使用root用户 Ubuntu系统默认只能使用普通用户,要想使用root用户,需要先设置root用户密码。 进入终端,配置root用户密码。按照提示输入密码。 sudo passwd root配置完成后,执行下面的密码,切换…...
济南精神心理专科:如何识别躯体化障碍的早期信号
济南躯体化障碍疾病就医选择难题在济南,面对躯体化障碍疾病的朋友最关心的是隐私和靠谱。选择一家好的医院至关重要,尤其是看躯体化障碍一定要选专科专业医院。这类医院不仅在专业诊疗上更有优势,还能提供更好的隐私保护和服务体验。本文将基…...
准备工作之动态内存分配[基于郝斌课程]
定义一块内存可以用数组定义,也可以动态分配:使用数组定义一块内存,则该块内存是静态的,也就是一旦定义之后,这块内存的大小就固定了,例如,数组元素个数是5,则定义后,这这…...
MySQL 事务与并发控制:从日志底层到 MVCC 哲学
MySQL 事务与并发控制:从日志底层到 MVCC 哲学 文章目录 MySQL 事务与并发控制:从日志底层到 MVCC 哲学📚 课程大纲规划 📖 第一讲:基础——事务概念与隔离级别1. 🎭 并发带来的三大“幽灵”👻 …...
附链小程序测评:支持Word/PDF/PPT/EXCEL/压缩包上传,解决公众号文件嵌入难题
公众号运营中,文件分发存在明确痛点:推文无法直接嵌入附件,第三方链接常出现跳转繁琐、广告弹窗、文件过期等问题,增加运营成本且影响用户体验。附链小程序为微信生态原生工具,核心解决上述痛点,支持公众号…...
深入Fly-By拓扑:为什么你的LPDDR4必须做Write Leveling?一次讲清时钟与数据对齐的核心原理
深入Fly-By拓扑:为什么你的LPDDR4必须做Write Leveling?一次讲清时钟与数据对齐的核心原理 在4266 Mbps的高速数据传输场景下,LPDDR4内存子系统如同一条需要精确调谐的八车道高速公路。当信号传输速率突破4GT/s时,皮秒级的时序偏差…...
屏幕取色与设计辅助工具 ColorWanted:提升设计师与开发者工作效率的专业解决方案
屏幕取色与设计辅助工具 ColorWanted:提升设计师与开发者工作效率的专业解决方案 【免费下载链接】ColorWanted Screen color picker for Windows (Windows 上的屏幕取色器) 项目地址: https://gitcode.com/gh_mirrors/co/ColorWanted 你是否曾遇到这样的工作…...
AI+Python 双驱动计量经济学:从多源数据处理到 SCI 论文--多源数据处理、机器学习预测及复杂因果识别全流程实战随机森林模型核心技术
为什么你自学了这么久,还是做不出成果?很多科研人做计量经济学研究,最大的问题不是不够努力,而是没有一套完整的全链条体系:只学了模型操作,却不懂底层理论,换个研究问题、换个数据集就不会做了…...
保姆级教程:用STM32的定时器输入捕获功能,手把手教你解码任意红外遥控器
STM32定时器输入捕获实战:从零解码未知协议红外遥控信号 红外遥控技术在家电控制领域已有数十年历史,但面对市面上五花八门的遥控协议,开发者常常陷入协议适配的泥潭。本文将带你突破协议限制,利用STM32的定时器输入捕获功能&…...
Unity UGUI实战:手把手教你打造一个可拖拽、可弯曲的UI连线组件(附完整源码)
Unity UGUI实战:打造可拖拽、可弯曲的智能连线系统 在游戏开发中,可视化连接系统是构建技能树、流程图、科技树等复杂UI结构的核心组件。传统实现往往局限于静态线条或简单的直线连接,缺乏交互性和动态美感。本文将带你从零构建一个支持实时拖…...
深入解析RS485接口:从硬件设计到工业应用
1. RS485接口基础解析 第一次接触RS485时,我也被它复杂的电气特性搞得一头雾水。直到在工厂里亲眼看到它如何稳定地穿过嘈杂的电机区域传输数据,才真正理解这个老牌工业接口的魅力。RS485本质上是一种差分信号传输标准,采用双绞线进行平衡传…...
