vant Picker 选择器数据处理的使用记录与坑

最新推荐文章于 2024-07-11 18:04:40 发布

Lucky宝宝

最新推荐文章于 2024-07-11 18:04:40 发布

阅读量6.1k

点赞数 1

文章标签： vue javascript js

本文链接：https://blog.youkuaiyun.com/lucky_ax/article/details/106571105

版权

这篇博客总结了在使用Vant UI库时，针对Picker选择器在处理Field输入框和Popup弹出层数据时遇到的问题。文章指出，官方API对某些功能描述不够清晰。在实际操作中，发现Picker的columns数据需要为字符串类型，但接收到的数据格式为2336 *** 1760。为解决这个问题，作者利用了JavaScript的Map对象进行数据转换。

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

总结使用vant 时遇到的一些问题

1, Field 输入框 Popup 弹出层 Picker 选择器

在使用过程中发现很多官方API说的都不是很清楚

以下是使用实例

效果图
在这里插入图片描述
HTML部分

         <li>
            <van-field
              clickable
              required
              is-link
              input-align="center"
              label-width="2rem"
              label="账户"
              :value="areaName"
              disabled="true"
              placeholder="关联账户"
              @click="areaShow=true"
              style="height:1rem; font-size: 0.3rem;line-height: 1rem;"
            />
            <van-popup v-model="areaShow" position="bottom">
              <van-area
                 :area-list="areaList"
                 @confirm='confirmFn'
                 @change='onChange'
                 @cancel="areaShow=false"
                 title="请选择关联账户"
               />
            </van-popup>
          </li>

导入组件

import { Picker, Popup, Field, ,Area  } from "vant";
Vue.use(Picker).use(Popup).use(Field)..use(Area);

      columns:[],
      selectvalue:'',
      selectclick:false,
      aMap:'',
      areaShow:false,

在使用中发现columns对象数组的values只能是字符串类型
但是数据给我返回的类型是有特殊格式2336 *** 1760
所以在这里就使用到了new Map()

     // res.accounts为接口返回的数据
    if(res.accounts.length>0){
        let v = this
        let aMap=new Map();  
        for(var i=0;i<res.accounts.length;i++){
          if(i==0){
              this.usingCard=res.accounts[i].accountnumber;
              this.guanlianzhanghu=res.accounts[i].accountid;
              
          }
          v.crdtnoSrr= {};
          v.crdtnoSrr.cardNoOld=(res.accounts[i].accountnumber);
          v.crdtnoSrr.cardNoNew=(res.accounts[i].accountnumber);
          v.crdtnoSrrOld.push(res.accounts[i].accountnumber);
          aMap.set(res.accounts[i].accountnumber,res.accounts[i].accountid);
        }
        //console.log("v.crdtnoSrrOld", v.crdtnoSrrOld);
        
        this.aMap=aMap;
       // console.log("this.aMap",this.aMap);
        
        this.columns = [
        { values: this.crdtnoSrrOld }
      ]

以上就是处理数据的方法

点击确认事件

 selonConfirm(selectvalue, index) {
     console.log(selectvalue);
      let aMap = this.aMap.get(selectvalue[0])
      console.log("aMap",aMap);
      sessionStorage.setItem("aMap", JSON.stringify(aMap));  //最后用sessionStorage存起来  再上传到数据库
      this.selectvalue = selectvalue[0];
      
      this.selectclick = false
      //Toast("当前值:"+ selectvalue + ",当前索引:"+index);
    },