mint-ui Picker 显示异常
mint-ui Picker 显示异常
现象
最近一个老项目页面显示异常,使用mint-ui Picker显示异常,直接显示成了 数据对象,而不是具体travelName 字段
组件
使用方式(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>
原文地址:https://blog.csdn.net/forgiveForever/article/details/143435544
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!