当前位置：首页 > article >正文

mint-ui Picker 显示异常

article 2024/11/2 9:28:43

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>

查看全文

http://www.kler.cn/a/375646.html