当前位置: 首页 > news >正文

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 显示异常 现象 最近一个老项目页面显示异常&#xff0c;使用mint-ui Picker显示异常,直接显示成了 数据对象&#xff0c;而不是具体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…...

群控系统服务端开发模式-应用开发-上传配置功能开发

下面直接进入上传配置功能开发&#xff0c;废话不多说。 一、创建表 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&#xff1a;本站 2&a…...

stm32——GPIO开发

目录 1、什么是GPIO 2、GPIO的作用 3、GPIO的基本结构 4、GPIO引脚的基本结构 5、GPIO端口模式的配置 1. 输入浮空&#xff08;Input Floating&#xff09; 2. 输入上拉&#xff08;Input Pull-Up&#xff09; 3. 输入下拉&#xff08;Input Pull-Down&#xff09; 4. …...

layui 自定义验证单选框必填

对于输入框类型必填验证&#xff0c;只需要在 input 输入框加入 lay-verify "required" 即可。但对于单选按钮这种特殊的该怎么办呢&#xff1f;layui 为我们提供了自定义验证。 1. 在单选按钮上添加自定义验证的名称 2. 验证规则如下 // 单选框自定义验证form.ve…...

Spring 设计模式之策略模式

Spring 设计模式之策略模式 策略模式构成部分java举例 策略模式 策略模式&#xff1a;允许定义一系列算法&#xff0c;并将每一个算法封装起来&#xff0c;使它们可以互相替换&#xff0c;且算法的变化可以独立于使用它们的客户端。 构成部分 Context&#xff08;上下文&…...

苹果开发 IOS 证书生成步骤

前提条件 你手上有一台 Macbook你的苹果账号已被添加到开发人员中 证书创建步骤 打开 XCode 直接生成 p12证书生成后&#xff0c;就可在苹果开发者管理界面中看到你的证书记录登录苹果开发中心&#xff0c;创建 profiles 文件&#xff0c;并下载以上步骤即可&#xff0c;就这…...

DDR2 SDRAM(五)初始化

因为DDR2本质上只是更高级的一种SRAM&#xff0c;底层操作原理和SRAM是一样的&#xff0c;所以很多基础的东西就不再赘述了。 一、原理 在初始化之前&#xff0c;DDR2芯片需要先上电&#xff0c;芯片有多个需要提供的电压&#xff0c;其大小和顺序也有要求&#xff0c;这部分…...

Python工具箱系列(五十七)

图像分割与人脸识别 众所周知图像是由若干有意义的像素组成的&#xff0c;图像分割作为计算机视觉的基础&#xff0c;对具有现有目标和较精确边界的图像进行分割&#xff0c;实现在图像像素级别上的分类任务。图像分割可分为语义分割和实例分割两类&#xff0c;区别如下&#x…...

数据智能驱动金融策略优化:民锋智能分析技术的应用

在现代金融市场中&#xff0c;数据分析与智能化技术的结合为投资策略带来了全新机遇。民锋以智能分析技术为核心&#xff0c;帮助投资者在复杂的市场环境中做出高效决策。本文将深入探讨民锋智能分析技术如何驱动策略优化&#xff0c;为投资者带来更加智能化的支持。 #### 一、…...

1009:带余除法

【题目描述】 给定被除数和除数&#xff0c;求整数商及余数。此题中请使用默认的整除和取余运算&#xff0c;无需对结果进行任何特殊处理。 【输入】 一行&#xff0c;包含两个整数&#xff0c;依次为被除数和除数&#xff08;除数非零&#xff09;&#xff0c;中间用一个空格隔…...

Jmeter实际应用

环境准备 JDK1.8Jmeter 5.6.3 下载地址Jmeter 插件 下载地址 放到lib/ext下 常用命令 # 启动 sh jmeter# 集群模式下启动节点&#xff0c;不启动用不了集群 sh jmeter-server#生成ssl需要的证书, 这里会要求输入个密码&#xff0c;是要在jmeter中用的 keytool -import -ali…...

C++基础(11.AVL树的实现)

目录 AVL的概念&#xff1a; AVL树的实现&#xff1a; AVL树的结构&#xff1a; AVL树的插⼊&#xff1a; 平衡因⼦更新&#xff1a; 旋转&#xff1a; AVL树的其他功能: AVL树平衡检测: 测试代码*2: 源代码&#xff1a; KV结构&#xff1a; 源代码&#xff1a; AVL…...

c# 抽象方法 虚函数 使用场景

在C#中&#xff0c;抽象方法&#xff08;abstract method&#xff09;和虚函数&#xff08;virtual method&#xff09;都是用于实现多态性&#xff08;polymorphism&#xff09;的重要特性&#xff0c;但它们在使用上有一些关键的区别和各自的用途。 抽象方法&#xff08;Abs…...

大数据安全方案 验证

一、背景 文档用于记录配置 Kerberos 和 Ranger 后&#xff0c;对 HDFS、Hive 认证和鉴权的功能测试。 二、Kerberos 验证 2.1、验证功能 1&#xff0c;HDFS 认证 2.1.1、访问 HDFS Kerberos 验证前&#xff0c;访问 HDFS 失败。 Kerberos 验证后&#xff0c;访问 HDFS 成…...

电脑软件:推荐一款免费且实用的电脑开关机小工具

目录 一、软件简介 二、软件功能 三、软件特点 四、使用说明 五、软件下载 今天给大家推荐一款免费且实用的电脑开关机小工具KShutdown&#xff0c;有需要的朋友可以下载试一下&#xff01; 一、软件简介 KShutdown是一款精巧且实用的定时自动关机小工具&#xff0c;对于…...

php反序列化靶场随笔分析

项目地址&#xff1a;github.com/mcc0624/php_ser_Class 推荐使用docker部署&#xff1a;https://hub.docker.com/r/mcc0624/ser/tags 前面讲了以下php基础&#xff0c;我们直接从class6开始实验 class6 访问页面&#xff0c;传一个序列化的字符串&#xff0c;php代码将其反…...

动态规划 - 编辑距离

115. 不同的子序列 困难 给你两个字符串 s 和 t &#xff0c;统计并返回在 s 的 子序列 中 t 出现的个数&#xff0c;结果需要对 10^9 7 取模。 算法思想&#xff1a;利用动态规划&#xff0c;分s[i - 1] 与 t[j - 1]相等&#xff0c;s[i - 1] 与 t[j - 1] 不相等两种情况具…...

力扣——113. 路径总和

113. 路径总和 II 给你二叉树的根节点 root 和一个整数目标和 targetSum &#xff0c;找出所有 从根节点到叶子节点 路径总和等于给定目标和的路径。 叶子节点 是指没有子节点的节点。 示例 1&#xff1a; 输入&#xff1a;root [5,4,8,11,null,13,4,7,2,null,null,5,1], t…...

C02S04-Ubuntu基本使用

一、Ubuntu初始配置 1. 使用root用户 Ubuntu系统默认只能使用普通用户&#xff0c;要想使用root用户&#xff0c;需要先设置root用户密码。 进入终端&#xff0c;配置root用户密码。按照提示输入密码。 sudo passwd root配置完成后&#xff0c;执行下面的密码&#xff0c;切换…...

intv_ai_mk11步骤详解:从curl验证到浏览器交互,完整闭环操作演示

intv_ai_mk11步骤详解&#xff1a;从curl验证到浏览器交互&#xff0c;完整闭环操作演示 1. 模型概述与核心能力 intv_ai_mk11是基于Llama架构的中等规模文本生成模型&#xff0c;专为通用文本处理任务优化。这个开箱即用的解决方案特别适合以下场景&#xff1a; 智能问答系…...

C语言入门必看:2026年嵌入式开发选C还是C++?

一、在2026年的时候&#xff0c;进行编程选择语言可千万别胡乱去选&#xff01;C语言、C语言、C#语言&#xff0c;它们有着相同源头却有着不同命运&#xff0c;选对了语言才是获得高薪的关键所在&#xff01; 对于编程领域而言&#xff0c;C、C、C#此三门如同“同门兄弟”般的语…...

告别PX4,试试APM!用ArduPilot+Gazebo搭建你的第一个无人机仿真环境(附QGC地面站连接)

从PX4到APM&#xff1a;ArduPilot无人机仿真环境全攻略 如果你已经熟悉PX4生态&#xff0c;却对ArduPilot&#xff08;APM&#xff09;固件在仿真领域的表现充满好奇&#xff0c;这篇文章将为你打开一扇新的大门。不同于市面上大量聚焦PX4的教程&#xff0c;我们将深入探讨APM在…...

STM32智能剪枝机:嵌入式系统与传感器集成实践

1. 项目背景与需求分析作为一名从事嵌入式开发多年的工程师&#xff0c;我最近完成了一个基于STM32的智能绿化带剪枝机项目。这个项目的初衷源于我在城市公园散步时的观察&#xff1a;园艺工人手持笨重的剪枝工具&#xff0c;在烈日下长时间弯腰作业&#xff0c;不仅效率低下&a…...

4步攻克Fiji在macOS系统的启动难题:从诊断到长效维护的全方位解决方案

4步攻克Fiji在macOS系统的启动难题&#xff1a;从诊断到长效维护的全方位解决方案 【免费下载链接】fiji A "batteries-included" distribution of ImageJ :battery: 项目地址: https://gitcode.com/gh_mirrors/fi/fiji 问题定位&#xff1a;精准识别Fiji启动…...

忍者像素绘卷效果对比:亮色像素美学 vs 传统暗调像素艺术表现力

忍者像素绘卷效果对比&#xff1a;亮色像素美学 vs 传统暗调像素艺术表现力 1. 作品概述 忍者像素绘卷是一款基于Z-Image-Turbo深度优化的图像生成工作站&#xff0c;它将忍者文化与16-Bit复古游戏美学完美融合。这款工具最显著的特点是采用了全新的"亮色像素"界面…...

从零到专业:League Director 让你的英雄联盟回放变成电影级大片

从零到专业&#xff1a;League Director 让你的英雄联盟回放变成电影级大片 【免费下载链接】leaguedirector League Director is a tool for staging and recording videos from League of Legends replays 项目地址: https://gitcode.com/gh_mirrors/le/leaguedirector …...

SpringBoot + MyBatis-Plus项目实战:从零搭建一个JavaEE课程设计骨架(附完整源码结构解析)

SpringBoot MyBatis-Plus项目实战&#xff1a;从零搭建一个JavaEE课程设计骨架&#xff08;附完整源码结构解析&#xff09; 当你第一次打开IDE准备开始JavaEE课程设计时&#xff0c;面对空白的项目窗口是否感到无从下手&#xff1f;本文将带你从零开始&#xff0c;用SpringBo…...

开发笔记:VSCode + Qt + clangd 明明能正常运行却满屏红波浪线

目录 开发笔记&#xff1a;VSCode Qt clangd 明明能正常运行却满屏红波浪线 前言 一、问题现象 二、根本原因&#xff1a;两套工具互不沟通 三、完整解决方案 方案 1&#xff1a;配置 .clangd&#xff08;最推荐、最根治&#xff09; 方案 2&#xff1a;自动生成 comp…...

如何三步搞定iOS微信聊天记录完整导出:隐私保护与数据备份终极指南

如何三步搞定iOS微信聊天记录完整导出&#xff1a;隐私保护与数据备份终极指南 【免费下载链接】WeChatExporter 一个可以快速导出、查看你的微信聊天记录的工具 项目地址: https://gitcode.com/gh_mirrors/wec/WeChatExporter 还在为无法永久保存重要微信对话而烦恼吗&…...