小程序使用 uView （1.x版本）踩坑历程

本文链接：https://blog.csdn.net/qq_40955745/article/details/129419471

文章列举了在使用uView1.x版本时遇到的三个问题：1)如何自定义下拉列表的展开图标；2)数字类型字段的表单验证失败；3)日历组件无法回显数据。对于这些问题，作者提供了相应的解决方案，包括修改组件属性和调整数据类型。尽管有解决办法，作者仍建议升级到2.x版本以避免类似问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

坑1:表单内增加下拉列表（select）右侧只能默认三角形icon

问题描述：

首先在uView1.x版本的组件里，下拉列表的展示如图，右侧展开icon默认为灰色三角形
在这里插入图片描述
想要修改成如下图的箭头，在1.x文档里没有对应可修改的属性

解决办法

在表单的<u-form-item>里增加 right-icon="arrow-right”，<u-input>里增加disabled并去掉type=“select”

  <u-form-item label="民族" prop="nation" required right-icon="arrow-right" >
     <u-input v-model="form.nation" disabled @click="onPicker('nation')" 
              placeholder="请选择" input-align="right" />
  </u-form-item>

问题2:表单验证的时候，某个值如果是number类型，进行表单校验时则会显示校验失败

场景描述：

表单里经常会有下拉列表让用户进行选择，当使用number类型的下拉框时，选中的字段是有值的，但还是显示校验失败提醒。

解决办法：将value赋值的时候改为string类型，或者加入type类型校验。

文档中有提及部分：

在这里插入图片描述

例如：

  rules: {
        depreciation: [
          {
          	type: "number",
            required: true,
            message: '请选择折旧情况',
            trigger: ['blur', 'change']
          }
        ],
      }

坑3:日历无法回显返回的数据日期

场景描述：在表单里经常需要填写时间范围，而修改表单的时候则需要先获取数据，将数据回显在表单上再进行修改。选择使用u-calendar组件的时候没有找到对应的办法将数据显示在日历控件上。

解决办法：改为uni-datetime-picker组件

  <u-form-item label="有效期" prop="expiryDateEnd" required right-icon="arrow-right" >
      <uni-datetime-picker
        v-model="form.datePicker"
        type="daterange"
        :border="false"
        rangeSeparator="～"
        @change="changeDate"
      />
    </u-form-item>