之前做過一個picker的三級聯動功能，這里分享代碼給大家
具體代碼：
// An highlighted block
<template>
<view>
<picker mode="multiSelector" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange" :value="https://www.cnblogs.com/smileZAZ/archive/2021/01/04/multiIndex" :range="multiArray">
<view style="display: flex;justify-content:space-around;align-items:center;width: 100%;flex: 1">
<view >
{{ areaname }}
<uni-icons :size="40" color="#e0e0e0" type="arrowdown" />
</view>
<view style="background-color: #50a0d1;height: 50rpx;width: 1px;opacity: 0.5"></view>
<view >
{{ buildingname }}
<uni-icons :size="40" color="#e0e0e0" type="arrowdown" />
</view>
<view style="background-color: #50a0d1;height: 50rpx;width: 1px;opacity: 0.5"></view>
<view >
{{ floorname }}
<uni-icons :size="40" color="#e0e0e0" type="arrowdown" />
</view>
</view>
</picker>
</view>
</template>
<script>
import Vue from 'vue';
export default {
data() {
return {
multiArray: [['1', '2', '3', '4', '5', '6', '7'], ['1舍', '2舍', '3舍', '4舍'], ['111樓', '112樓', '113樓', '114樓']],
multiIndex: [0, 0, 0],
tabindex: 0,
ydindex: 0,
firstid: '0',
secondid: '0',
thirdid: '0',
areaname: '1',
dengswitchvalue: '',
ktswitchvalue: '',
buildingname: '1舍',
floorname: '111樓',
nowitem: '1-1舍-111樓',
column1data: [
//每個院部的樓棟
['11舍', '12舍', '13舍', '14舍'],
// ['21舍', '22舍', '23舍', '24舍'],
['21舍'],
// ['31舍', '32舍', '33舍', '34舍'],
['31舍', '32舍'],
['41舍', '42舍', '43舍', '44舍'],
['51舍', '52舍', '53舍', '54舍'],
['61舍', '62舍', '63舍', '64舍'],
['71舍', '72舍', '73舍', '74舍']
],
hangdata: [
//每一棟包含樓層
[['111樓', '112樓', '113樓', '114樓'], ['121樓', '122樓', '123樓'], ['131樓', '132樓', '133樓', '134樓'], ['141樓', '142樓', '143樓', '144樓']],
// [['211樓', '212樓', '213樓', '214樓'], ['221樓', '222樓', '223樓', '224樓'], ['231樓', '232樓', '233樓', '234樓'], ['241樓', '242樓', '243樓', '244樓']],
[['211樓', '212樓', '213樓', '214樓']],
// [['311樓', '312樓', '313樓', '314樓'], ['321樓', '322樓', '323樓', '324樓'], ['331樓', '332樓', '333樓', '334樓'], ['341樓', '342樓', '343樓', '344樓']],
[['311樓', '312樓', '313樓', '314樓'], ['321樓', '322樓', '323樓']],
[['411樓', '412樓', '413樓', '414樓'], ['421樓', '422樓', '423樓', '424樓'], ['431樓', '432樓', '433樓', '434樓'], ['441樓', '442樓', '443樓', '444樓']],
[['511樓', '512樓', '513樓', '514樓'], ['521樓', '522樓', '523樓'], ['531樓', '532樓', '533樓', '534樓'], ['541樓', '542樓', '543樓', '544樓']],
[['611樓', '612樓', '613樓', '614樓'], ['621樓', '622樓', '623樓', '624樓'], ['631樓', '632樓', '633樓', '634樓'], ['641樓', '642樓', '643樓', '654樓']],
[['711樓', '712樓'], ['721樓', '722樓', '723樓'], ['731樓', '732樓', '733樓', '734樓'], ['741樓', '742樓', '743樓', '744樓']]
]
};
},
methods: {
bindMultiPickerChange(e) {
this.multiIndex = e.detail.value;
this.areaname = this.multiArray[0][e.detail.value[0]];
this.buildingname = this.multiArray[1][e.detail.value[1]];
this.floorname = this.multiArray[2][e.detail.value[2]];
this.nowitem = this.multiArray[0][e.detail.value[0]] + '-' + this.multiArray[1][e.detail.value[1]] + '-' + this.multiArray[2][e.detail.value[2]];
console.log('選擇了：' + this.nowitem);
},
bindMultiPickerColumnChange(e) {
switch (e.detail.column) {
case 0:
this.firstid = e.detail.value;
if (typeof this.hangdata[this.firstid][this.secondid] == 'undefined') {
this.secondid = 0; //當第二列資料沒有上一個second列的情況
}
switch (e.detail.value) {
case this.firstid:
Vue.set(this.multiArray, 1, this.column1data[this.firstid]);
Vue.set(this.multiArray, 2, this.hangdata[this.firstid][this.secondid]); //為了對應第三列關系
break;
default:
break;
}
break;
case 1:
this.secondid = e.detail.value;
if (typeof this.hangdata[this.firstid][this.secondid][this.thirdid] == 'undefined') {
this.thirdid = 0; //當第三列資料沒有上一個列的情況
}
switch (this.firstid) {
case this.firstid:
switch (this.secondid) {
case this.secondid:
Vue.set(this.multiArray, 2, this.hangdata[this.firstid][this.secondid]);
break;
default:
break;
}
break;
default:
break;
}
case 2:
this.thirdid = e.detail.value;
break;
default:
break;
}
}
}
};
</script>
<style lang="less"></style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/244648.html
標籤：其他
下一篇：SVN操作流