小程序+vant的级联选择的应用

1、wxml中

 <view class="release_subtitle">行业</view>
 <van-cell title="点击选择" is-link size="large" bindtap="showModal" custom-class="release_address" value="{{industryData}}" data-modalType="industryShow" title-class="title-class" />

<!-- ====== 行业弹窗 start====== -->
<van-action-sheet show="{{ industryShow }}" bind:click-overlay="closeModal" data-modalType="industryShow">
 <view class="modal-content">
   <!-- 行业选择 -->
   <van-picker show-toolbar title="选择行业" columns="{{ pickerIndustryList }}" bind:confirm="selectedIndustry"  bind:cancel="closeIndustryModal"/>
 </view>
</van-action-sheet>
<!-- ====== 行业弹窗 end====== -->

2、测试数据
测试数据是个对象

const testDate = {
  互联网金融: ['行业1-1', '行业1-2', '行业1-3', '行业1-4', '行业1-5', '行业1-3', '行业1-4', '行业1-5'],
  服务行业: ['行业2-1', '行业2-2', '行业2-3', '行业2-4', '行业2-5'],
  智能硬件: ['行业3-1', '行业3-2', '行业3-3', '行业3-4', '行业3-5'],
  泛娱乐: ['行业4-1', '行业4-2', '行业4-3', '行业4-4', '行业4-5'],
};

columns=“{{ pickerIndustryList }}”，使用columns="{{}}"将数据绑定到van-picker 组件上

//弹窗行业数据列表
 pickerIndustryList: [{
   values: Object.keys(testDate),//获取第一级行业信息  Object.keys()获取对象中的属性值
 },
 {
   values: testDate[Object.keys(testDate)[0]],//Object.keys(testDate)[0]获取的是互联网金融  即默认罗列互联网金融下的所有二级行业
   defaultIndex: 1,//二级行业索引为1的默认展示
 },
 ],
 industryData: '',//选中的行业数据

3、data中定义数据

3、js中，点击组件完成按钮时调用的方法
van-picker 组件confirm方法，默认返回所选value、index；onchange()方法默认返回picker、value、index

  /*
   *@Description: 选择行业并保存行业编辑，
   *@MethodAuthor: LiJuncai
   *@Date: 2022-06-10 17:47:42
  */
  selectedIndustry(val) {
    const { value } = val.detail;//接收选中的所有值  
    var industryData = value.join('-');//数组转化成字符串
    this.setData({
      industryData: industryData,//把选中的值赋值到页面中
      industryShow: false//关闭弹窗
    })
  },