使用vant 级联选择的主要流程就是根据options的值进行使用，如果需要自定义可以把从api获得的信息通过算法进行处理处理成options的样式就可以使用了 。
首先就是先会在微信小程序中使用vant的组件这里直接引用不做过多的介绍，
<!-- 提示:vant组件给的样式，可以根据需求更改 -->
<view style="height:30rpx;"></view>
<view>
<van-field value="{{ fieldValue }}" is-link readonly label="选择门锁" placeholder="请选择楼宇-房间号" bind:tap="onClick1" style="font-weight: 700;" />
<van-popup show="{{ show }}" round position="bottom">
<van-cascader wx:if="{{ show }}" value="{{ cascaderValue }}" title="请选择所在地区" options="{{ options }}" active-color="#d7000f" bind:close="onClose1" bind:change="onChangeFiled" bind:finish="onFinish1" />
</van-popup>
</view>之后我们观察这个组件是由 vant-field 和 vant-cascader 共同完成实现的。根据参数show:true/false来 确定是否显示 cascader组件，cascaderValue是用最后用于获得的结果，可以根据自己的需求使用。参数options是我们这里最重要的信息，就是展示复联框里面的内容。vant给出的options的固定样式，参数的格式应该是不能修改的，但是vant官方给出了修改，里面的字段是可以修改的。文章来源：https://www.toymoban.com/news/detail-504612.html
options = [
{
text: '浙江省',
value: '330000',
children: [{ text: '杭州市', value: '330100' }],
},
{
text: '江苏省',
value: '320000',
children: [{ text: '南京市', value: '320100' }],
},
];下面是做的微信小程序demo的一个小展示。文章来源地址https://www.toymoban.com/news/detail-504612.html
//微信小程序data中定义的数据
data:{
value: '',
show: false,
//options 中给的null字段是为了防止我们请求时没有数据造成的，组件原始数据展示出来的bug
options: [{
text: 'null',
value: '',
children: [],
}],
cascaderValue: "",
myRoomid:'',
myRoominfo:''
}
// 复联框
onClick1() {
this.setData({
show: true,
});
},
onClose1() {
this.setData({
show: false,
});
},
// vant 给出的函数用于，监听复联框组件结束的事件
onFinish1(e) {
const { selectedOptions, value } = e.detail;
const fieldValue = selectedOptions
.map((option) => option.text || option.name)
.join('-');
const myPlace = selectedOptions.map((option) => option.text)
// 我现在需要匹配一下id
//查找对应的函数
this.setData({
myPlace,
fieldValue,
cascaderValue: value,
})
console.log("我的楼宇",this.data.myPlace);
console.log("我的房间信息",this.data.myRoominfo);
let array = this.data.myRoominfo
//查找对应的函数
const myList = array.find(function(array,index,arrs){
return array.building == myPlace[0] && array.name == myPlace[1]
})
console.log("过滤",myList);
this.setData({
roomId:myList.id,
checked1: myList.lock1Status == 1 ? false:true,
checked:myList.lock1Status == 1 ? false:true
})
console.log("roomid",this.data.roomId);
this.setData({
show:false
})
},
//在微信小程序加载的时候通过 api获得数据，并且为了迎合vant组件的样式写的笨拙的算法，求大佬修改一下！
onLoad(options) {
//wx小程序自带的请求api
wx.request({
url: 'http://localhost:8000/room/myRoom',
method: 'GET',
header: {
"Content-Type": "application/x-www-form-urlencoded",
//这个数据是通过用户唯一的标识符id所获取的
"token": wx.getStorageSync('token'),
},
success: (res) => {
console.log("data:", res);
// 把我的所有房间的参数拿到
this.setData({
myRoominfo:res.data.data
})
//开始使用笨拙的算法处理vant组件所需要的options参数的样式
let array = res.data.data
// 转接数组，这里定义了一个和options相似的变量 myoptions方便对options直接赋值
//因为wx小程序的this.setdata({})对数组对象的单独赋值有些困难
var myOptions = [{
text: '浙江省',
value: '330000',
children: [],
}]
/*
api获得的数据样式：
0: {building: "信息中心", createTime: "2023-02-27 15:51:52", deviceName: "Room204", deviceType: "有线", door1Status: "1", …}
1: {building: "信息中心", createTime: "2023-02-28 21:01:46", deviceName: "Room208", deviceType: "4G", door1Status: "1", …}
2: {building: "科技大楼", createTime: "2023-02-28 22:38:56", deviceName: "Building413", deviceType: "4G", door1Status: "1", …}
*/
for (var i = 0; i < array.length; i++) {
var unique = true;
if (i == 0) {
myOptions[i].text = array[i].building
myOptions[i].value = i
myOptions[i].children.push({ text: `${array[i].name}`, value: i })
continue;
}
for (var idx = 0; idx < myOptions.length; idx++) {
if (myOptions[idx].text == array[i].building) {
myOptions[idx].children.push({ text: `${array[i].name}`, value: i })
unique = false;
continue;
}
}
if (unique) {
myOptions.push({
text: `${array[i].building}`,
value: i,
children: [{ text: `${array[i].name}`, value: i }],
})
}
}
this.setData({
options:myOptions
})
console.log("options",myOptions);
}
})
},
//数据处理后的样式 最后只要把这个值传给options就可以了 复联框就可以正常使用
/*0:
children: Array(2)
0: {text: "204", value: 0}
1: {text: "208", value: 1}
length: 2
nv_length: (...)
__proto__: Array(0)
text: "信息中心"
value: 0
__proto__: Object
1:
children: Array(1)
0: {text: "413", value: 2}
length: 1
nv_length: (...)
__proto__: Array(0)
text: "科技大楼"
value: 2*/
到了这里，关于Vant Cascader 级联选择使用 wx小程序的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
