Vant picker实现多级联动的方法

 const全市=[//我们习惯的格式。可以后台给你出,如果你打不过的话,你就……
　　{
　　文字:“测试一“,//默认识别文本标签
　　id: 1、
　　孩子:(
　　{
　　id: 11日
　　文字:“测试1-1",
　　孩子:(
　　{
　　id: 111年,
　　文字:“测试1-1-1"
　　},
　　{
　　id: 112年,
　　文字:“测试1-1-2"
　　}
　　]
　　},
　　{
　　id: 12,
　　文字:“测试1-2",
　　孩子:(
　　{
　　id: 122年,
　　文字:“测试1-2-1"
　　},
　　{
　　id: 122年,
　　文字:“测试1-2-2"
　　}
　　]
　　},
　　{
　　id: 13日
　　文字:“测试1-3"
　　}
　　]
　　},
　　{
　　文字:“测试二“,
　　id: 2
　　孩子:(
　　{
　　id: 21日
　　文字:“测试2“,
　　孩子:(
　　{
　　id: 221年,
　　文字:“测试2-2-1"
　　},
　　{
　　id: 222年,
　　文字:“测试2-2-2"
　　}
　　]
　　},
　　{
　　id: 22日
　　文字:“测试2“;
　　},
　　{
　　id: 23日,
　　文字:“测试2“;
　　}
　　]
　　},
　　{
　　文字:“测试三“,
　　id: 3,
　　孩子:(
　　{
　　id: 31日
　　文字:“测试3“,
　　孩子:(
　　{
　　id: 311年,
　　文字:“测试3-1-1"
　　},
　　{
　　id: 312年,
　　文字:“测试3-3-2"
　　}
　　]
　　},
　　{
　　id: 32岁
　　文字:“测试3“;
　　},
　　{
　　id: 33岁
　　文字:“测试3“;
　　}
　　]
　　}
　　];
　　
　　数据(){
　　返回{
　　站:““,
　　showPicker:假的,
　　列:[
　　{
　　价值观:北京市,//设置的页面初始值
　　名称:“column1"
　　},
　　{
　　价值观:全市[0]定格,
　　名称:“column2"
　　},
　　{
　　价值观:全市[0]定格[0]定格,
　　名称:“column3"
　　}
　　]，
　　}
　　}；
　　
　　alt=" Vant picker实现多级联动的方法"> 
 
 <强>代码结构大概是这个样子: 
  & lt; !——选择收支类型弹窗——比;
　　& lt; van-popup ref=癮ccountTypePopup"v模型=皊howPicker"位置=癰ottom"比;
　　& lt; van-picker
　　ref=癮ccountTypePopup2"
　　show-toolbar
　　:列=癱olumns"
　　@cancel=皊howPicker=false"
　　@confirm=皁nConfirm"
　　@change=皁nChange"/比;
　　& lt;/van-popup>
　　方法:{//?/修改列方法
　　changeColumns (p_name名称){//p_name一级分类回显值//名字二级分类回显值//类型列表
　　var typeList=这一点。tabActive===0
　　,# 63;this.expendTypeList
　　:this.incomeTypeList;//设置收支类型选项列的默认值和子选项
　　this.columns [0] [“defaultIndex"]=this.columns [0] [
　　“values"
　　]。findIndex(项目=比;项===p_name);
　　
　　this.columns [1] [“values"]=typeList [p_name];
　　
　　this.columns [1] [“defaultIndex"]=this.columns [1] [
　　“values"
　　]。findIndex(项目=比;项===名称);
　　}
　　}

期望是:弹出弹出后,选择器选中用户已经选中的选项

结果是:仅第一次弹出弹出后,选择器选中用户已经选中的选项,之后的弹出一直展示第一次的列表

<强>查看文档,解决方案是用van-picker的方法:

坑就坑中,组件嵌套(弹出套picker),用ref获取不选到实例

<强>咋整?

用调试工具调试了半天发现,选择实例化成DOM元素后,即使隐藏,也仅仅是显示:没有,不会重新实例化

那就好办了…