uview的u-select三级联动(这里是1版本,不建议2版本)

注意,这个u-select仅限弹窗,不包含展示,属性自己级去看官网

<!-- 三联地址 -->
    <u-select v-model="u_selectShow" mode="mutil-column-auto" :list="provinceArr" title="选择区县" @confirm="confirm" @cancel="closeCancel" @tap.stop="stop"></u-select>

注意点2个

1,list只接受lable和value,(二级数组)children外的这两个联动的key,不接受其他的key名

2,滚动地址方法里面@confirm=“confirm”的回调函数方法中参数e是个多维数组,返回的是选择的数据lable和value,自行赋值即可

联动地址

//三级联动选择地址事件,点击确定按钮
    confirm(e) {
      this.provinceCode= e[0].value
      this.provinceName=e[0].label
      this.cityCode= e[1].value
      this.cityName= e[1].label
      this.countyCode= e[2].value
      this.countyName= e[2].label
        //展示的数据再input展示
      this.select = `${this.provinceName}/${this.cityName}/${this.countyName}`
      console.log("三级联动事件",e,this.select)
    },

如果你的数据key名不是lable或者

比如我的是对应的code和text

处理方法,使用循环嵌套 provinceArr是获取的三联地址

            let arr =[]
          provinceArr.forEach((item,index)=>{
            arr[index] = {
              value:item.code,
              label:item.text,
              children:item.children
            }
            //第二级
            item.children.forEach((v,i)=>{
              arr[index].children[i]={
                value:v.code,
                label:v.text,
                children:v.children
              }
              //第三
              v.children.forEach((m,n)=>{
                arr[index].children[i].children[n] = {
                  value:m.code,
                  label:m.text,
                }
              })
            })
          })
          this.provinceArr = arr
          console.log(this.provinceName,this.cityName,this.select,this.provinceArr)

也可以使用递归,目前还在优化,欢迎提出更好的方法

猜你喜欢

转载自blog.csdn.net/m0_64207574/article/details/127833944