介绍
在vant中使用选择器+弹出实现一个三级联动?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
选择器选择器的数据由列属性控制,列中有几个元素就代表该选择器有多少级,通过改变方法来给对应列赋值。
& lt; template>
& lt; div类=癴orm"祝辞
& lt; van-row类型=癴lex"证明=癱enter"align=癱enter"比;
& lt; van-col跨度=?”;类=皌ext"祝辞自定义三级联动& lt;/van-col>
& lt; van-col跨度=?9“比;
& lt; van-field v模型=皊tudent"占位符=扒胙≡瘛?@click=皊tuShow=true":只读的=皌rue"/比;
& lt;/van-col>
& lt;/van-row>
& lt; !——底部弹出——比;
& lt; van-popup v模型=皊tuShow"位置=癰ottom":比;
& lt; van-picker:列=皊tuLoad"@confirm=皊tuConfirm"@change=皊tuChange"@cancel=皊tuShow=false"show-toolbar/比;
& lt;/van-popup>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
名称:“Form",
数据(){
返回{
学生:& # 39;& # 39;
stuShow:假的,
stuLoad: [],
stuColumn1: [],
stuColumn2: [],
stuColumn3: []
};
},
创建(){
this.makeData ();//页面加载时给选择框赋初始值
},
方法:{
makeData(){//模拟数据,生产环境用axios获取数据
让column1=[{
& # 39;孩子# 39;:0,
& # 39;文本# 39;:& # 39;请选择& # 39;
},{
& # 39;孩子# 39;:1,
& # 39;文本# 39;:& # 39;一年级& # 39;
},{
& # 39;孩子# 39;:2
& # 39;文本# 39;:& # 39;二年级& # 39;
});
让column2={
& # 39;1 & # 39;:[{
& # 39;孩子# 39;:1,
& # 39;文本# 39;:& # 39;一组& # 39;
},{
& # 39;孩子# 39;:2
& # 39;文本# 39;:& # 39;二组& # 39;
},{
& # 39;孩子# 39;:3,
& # 39;文本# 39;:& # 39;三组& # 39;
}),
& # 39;2 & # 39;:[{
& # 39;孩子# 39;:4
& # 39;文本# 39;:& # 39;四组& # 39;
},{
& # 39;孩子# 39;:5
& # 39;文本# 39;:& # 39;五组& # 39;
})
}
让column3={
& # 39;1 & # 39;:[{
& # 39;孩子# 39;:1,
& # 39;文本# 39;:& # 39;小明& # 39;
},{
& # 39;孩子# 39;:2
& # 39;文本# 39;:& # 39;小红& # 39;
},{
& # 39;孩子# 39;:3,
& # 39;文本# 39;:& # 39;小刚& # 39;
}),
& # 39;2 & # 39;:[{
& # 39;孩子# 39;:4
& # 39;文本# 39;:& # 39;艾米# 39;
},{
& # 39;孩子# 39;:5
& # 39;文本# 39;:& # 39;山姆# 39;
}),
& # 39;3 & # 39;:[{
& # 39;孩子# 39;:4
& # 39;文本# 39;:& # 39;锡安# 39;
},{
& # 39;孩子# 39;:5
& # 39;文本# 39;:& # 39;朱诺# 39;
}),
& # 39;4 & # 39;:[{
& # 39;孩子# 39;:6,
& # 39;文本# 39;:& # 39;露西# 39;
},{
& # 39;孩子# 39;:7,
& # 39;文本# 39;:& # 39;汤姆# 39;
}),
& # 39;5 & # 39;:[{
& # 39;孩子# 39;:6,
& # 39;文本# 39;:& # 39;iwan # 39;
})
}
让列=[];
列=[{
价值观:column1,
defaultIndex: 0//默认选中项索引
},
{
价值观:[],
defaultIndex: 0
},
{
价值观:[],
defaultIndex: 0
}
];
这一点。stuColumn2=column2;
这一点。stuColumn3=column3;
这一点。stuLoad=列;
},
stuConfirm(价值,指数){//下方弹出层点击确认时触发//值为各列选中值//索引为各列选中的索引
如果(index.indexOf(0)比;1){
警报(& # 39;请选择& # 39;);
其他}{
让内容价值[0]=[& # 39;文本# 39;]+ & # 39;/& # 39;+价值[1][& # 39;文本# 39;]+ & # 39;/& # 39;+价值[2][& # 39;文本# 39;];
这一点。学生=内容;
这一点。stuShow=false;
}
},
stuChange(选择器、价值,指数){//选择器改变时触发//选择实例//值为当前选中值//索引为当前列对应的索引,第一列索引为0,第二列索引为1,依次列推
如果(指数==0){//改变第一列的值
让我[0]=值(& # 39;孩子# 39;);
让项目=tuColumn2[我],# 63;这一点。stuColumn2[我]:[];
如果物品,,项[0][& # 39;文本# 39;]!=& # 39;请选择& # 39;){
item.unshift ({
& # 39;孩子# 39;:0,
& # 39;文本# 39;:& # 39;请选择& # 39;
})
}
选择器。setColumnValues(1项);//给对应的列赋值,第一个参数为列的索引值,第二个参数为列的值
}else if(指数==1){
让我=价值[1][& # 39;孩子# 39;];
让项目=tuColumn3[我],# 63;这一点。stuColumn3[我]:[];
如果项目。长度!=0,,项[0][& # 39;文本# 39;]!=& # 39;请选择& # 39;){
item.unshift ({
& # 39;孩子# 39;:0,
& # 39;文本# 39;:& # 39;请选择& # 39;
})
}
选择器。setColumnValues(2项);
}
}
}
};
& lt;/script>
& lt; scoped>风格;
。text {
text-align:正确;
}
& lt;/style> 在vant中使用选择器+弹出实现一个三级联动
