厦门网站做优化搜索引擎优化的工具

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>