小程序使用vant weapp自定义级联三级下拉

最新推荐文章于 2024-03-26 16:26:56 发布

ruoyan8899

最新推荐文章于 2024-03-26 16:26:56 发布

阅读量2.1k

点赞数 2

分类专栏：学习笔记文章标签：微信小程序

本文链接：https://blog.csdn.net/ruoyan8899/article/details/123639312

版权

学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文档记录了在Vant WeApp框架中实现自定义三级级联选择器的过程，详细展示了如何处理第三级数据过长的问题。通过引入van-cell、van-popup和van-picker组件，结合WXML和JS代码，实现了供体区域的三级选择功能，包括山西省、河北省和陕西省等地区的医院。在JS代码中，通过监听change和confirm事件来更新选择的区域和医院信息。

摘要由CSDN通过智能技术生成

vant weapp框架中的自定义级联只有双层的案例，对于像我这样的开发小白来说想要一个自定义内容的三级级联还挺有难度，在使用过程中，因为自己的第三级数据占位比较长，而文档中并没有这方面的设置参考，最后爱研究的同事看了下源码给解决了，特此记录一下，希望和学习开发的朋友们共同进步。

效果图如下：

在使用vant weapp的时候提前要在项目的app.json中"usingComponents": {}引入对应的功能块，这个自定义级联使用到下边的功能块：

"usingComponents": {
    "van-cell": "@vant/weapp/cell/index",
    "van-popup": "@vant/weapp/popup/index",
    "van-picker": "@vant/weapp/picker/index"
 }

wxml代码：

<van-cell size="large" required="true" title="供体区域：" is-link value="{{supplyArea}}" bind:click="supplyAreaClick"/>
      <van-popup
      show="{{ supplyAreaDialog }}"
      position="bottom" 
      bind:close="supplyAreaCancel"
      >
            <van-picker show-toolbar title="选择医院" value="{{ deptId }}" columns="{{ columns }}" bind:change="supplyChange" bind:confirm="supplyAreaConfirm"
            bind:cancel="supplyAreaCancel" />
      </van-popup>

JS代码：

const citys = [ 
  {
   text: "山西省", // 默认识别text标签
   id: 1,
   children: [
    {
     id: 11,
     text: "太原市",
     children: [
      {
       id: 111,
       text: "山西白求恩医院" 
      },
      {
       id: 112,
       text: "山大一院"
       }
       ,
      {
       id: 113,
       text: "山大二院"
       }
     ]
    },
    {
     id: 12,
     text: "大同市",
     children: [
      {
        id: 121,
        text: "大同一院",
      },
      {
        id: 122,
        text: "大同二院",
      }
     ]
    },
    {
     id: 13,
     text: "忻州市",
     children: [
      {
        id: 131,
        text: "忻州一院",
      },
      {
        id: 132,
        text: "忻州二院",
      }
     ]
    }
   ]
  },
  {
   text: "河北省",
   id: 2,
   children: [
    {
     id: 21,
     text: "石家庄市",
     children: [
      {
       id: 211,
       text: "石家庄一院"
      },
      {
       id: 212,
       text: "石家庄二院"
      }
     ]
    },
    {
     id: 22,
     text: "保定市",
     children:[
       {
        id: 221,
        text: "保定市一院"
       },
       {
        id: 222,
        text: "保定市二院"
       }

     ]
    },
    {
     id: 23,
     text: "邯郸市",
     children:[
      {
        id: 231,
        text: "邯郸市一院"
       },
       {
        id: 232,
        text: "邯郸市二院"
       }
     ]
    }
   ]
  },
  {
   text: "陕西省",
   id: 3,
   children: [
    {
     id: 31,
     text: "西安市",
     children: [
      {
       id: 311,
       text: "西安一院"
      },
      {
       id: 312,
       text: "西安二院"
      }
     ]
    },
    {
     id: 32,
     text: "宝鸡市",
     children:[
      {
        id: 321,
        text: "宝鸡市一院"
       },
       {
        id: 322,
        text: "宝鸡市二院"
       }
     ]
    },
    {
     id: 33,
     text: "延安市",
     children:[
      {
        id: 331,
        text: "延安市一院"
       },
       {
        id: 332,
        text: "延安市二院"
       }
     ]
    }
   ]
  }
 ];
Page({
   data: {
    supplyAreaDialog: false,
    supplyArea:'请选择',
    deptId:[],
    columns: [
      {
        values:  citys,
        className: 'column1',
        defaultIndex: 0,
        flex:1 //控制每列的宽度
      },
      {
        values: citys[0].children,
        className: 'column2',
        defaultIndex: 0,
        flex:1
      },
      {
        values: citys[0].children[0].children,
        className: 'column3',
        defaultIndex: 0,
        flex:2
      },
    ],
  },
  supplyAreaClick() {
    this.setData({
        supplyAreaDialog: true
    });
},
supplyAreaCancel() {
    this.setData({
        supplyAreaDialog: false
    });
},
supplyAreaConfirm(event) {
    console.log('区域',event)
    const Address = event.detail.value
    this.setData({
        supplyArea: Address[0].text + Address[1].text + Address[2].text,
        supplyAreaDialog: false,
        deptId: event.detail.index
    });
},
supplyAreaCancel() {
    this.setData({
        supplyAreaDialog: false
    });
},
supplyChange(event) {
  const { picker, value, index } = event.detail;
  console.log(value)
   let ColumnIndex = picker.getColumnIndex(index);
  if (index == 0) {
    picker.setColumnValues(index + 1, value[index].children || []);
    picker.setColumnValues(index + 2, value[index].children[index].children || []);
   }
   console.log("第" + index + "列", "第" + ColumnIndex + "个");
   if(index == 1){
      picker.setColumnValues(index + 1, value[index].children || []);
   }
   
},

})