给移动端vant框架 中的下拉菜单 设置默认选项

做了才知道,移动端的下拉菜单默认选项和pc的完全不一样,导致我煎熬了大半天

这是页面上的代码,里面有一个

v-modal="areaValue"

ref ="cityPicker"

 

 
        
          
        

在data里面定义了一个:

areaValue: "陕西省-西安市"
citydata: [],
//获取省份代码
    getsfdm() {
      this.$http.get(window.knowledgebase + "/xzqh/getSfList").then((res) => {
        const response = res.body;
        if (response.code == 0) {
          let arr = [];
          response.data.forEach(item=>{
            arr.push({
              keyId: item.xzqhszDm,
              text: item.xzqhmc,
            });
            if(item.xzqhmc == '陕西省'){
              // this.getsdm(item);
              this.provinceDm = item.xzqhszDm;
            }

          })
          // this.areaValue = `${values[0].text}-${values[1].text}`;
          // shengQydm: this.provinceDm,
          //         qydm: this.cityDm,

          this.areadata = arr;

        }
      });
    },
    //获取市代码
    getsdm(area) {
      this.$http
              .get(window.knowledgebase + "/xzqh/getDsList?sjxzqhszDm=" + area.keyId)
              .then((res) => {
                const response = res.body;
                if (response.code == 0) {
                  let arr = [];
                  response.data.forEach(item=>{
                    arr.push({
                      keyId: item.xzqhszDm,
                      text: item.xzqhmc,
                    });
                  })
                  this.citydata = arr;
                  this.$refs.cityPicker.setColumnValues(1, this.citydata);
                  this.$refs.cityPicker.setColumnValue(1, '西安市');
                }
              });
    },

重点是这两句:  this.citydata = arr;
                           this.$refs.cityPicker.setColumnValues(1, this.citydata); //
                           this.$refs.cityPicker.setColumnValue(1, '西安市');

 

setColumnValues  意思是 /: 获取对应列选中项的索引

setColumnValue 意思是 /:设置对应列选中的值

 

在此,已经完了,有什么不足的地方,欢迎大家提出来。在此感谢张先生对我的极力帮助。爱你哟

你可能感兴趣的:(vue,vue)