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>

原文地址：https://blog.csdn.net/forgiveForever/article/details/143435544

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！