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>
)
注解)
