The main process of using vant cascading selection is to use it according to the value of options. If you need to customize, you can process the information obtained from the api into the style of options through an algorithm and then use it.
First of all, we will use the vant components in the WeChat applet first. Here we will directly quote without too much introduction.
<!-- 提示: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>Then we observe that this component is implemented by vant-field and vant-cascader. Determine whether to display the cascader component according to the parameter show:true/false. The cascaderValue is the result obtained at the end and can be used according to your own needs. The parameter options is the most important information here, which is to display the content in the multilink box. The fixed style of the options given by vant, the format of the parameters should not be modified, but vant officially gave the modification, and the fields inside can be modified.
options = [
{
text: '浙江省',
value: '330000',
children: [{ text: '杭州市', value: '330100' }],
},
{
text: '江苏省',
value: '320000',
children: [{ text: '南京市', value: '320100' }],
},
];The following is a small demonstration of the WeChat applet demo.
//微信小程序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*/