您好,登錄后才能下訂單哦!
在vant中使用 picker+popup 實(shí)現(xiàn)一個(gè)三級(jí)聯(lián)動(dòng)?針對(duì)這個(gè)問題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。
picker選擇器的數(shù)據(jù)由columns屬性控制,columns中有幾個(gè)元素就代表該選擇器有多少級(jí),通過change方法來給對(duì)應(yīng)列賦值。
columns = [{ values: column1, // 對(duì)應(yīng)列的值 defaultIndex: 0, // 默認(rèn)選中項(xiàng)索引 className: 'class1' // 對(duì)應(yīng)列的類名 }, { values: [], defaultIndex: 0, className: 'class2' }, { values: [], defaultIndex: 0, className: 'class3' } ];
demo
<template> <div class="form"> <van-row type="flex" justify="center" align="center" > <van-col span="5" class="text">自定義三級(jí)聯(lián)動(dòng)</van-col> <van-col span="19"> <van-field v-model="student" placeholder="請(qǐng)選擇" @click="stuShow = true" :readonly="true" /> </van-col> </van-row> <!-- 底部彈出 --> <van-popup v-model="stuShow" position="bottom" :> <van-picker :columns="stuLoad" @confirm="stuConfirm" @change="stuChange" @cancel="stuShow = false" show-toolbar /> </van-popup> </div> </template> <script> export default { name: "Form", data() { return { student: '', stuShow: false, stuLoad: [], stuColumn1: [], stuColumn2: [], stuColumn3: [] }; }, created() { this.makeData(); // 頁面加載時(shí)給選擇框賦初始值 }, methods: { makeData() { // 模擬數(shù)據(jù),生產(chǎn)環(huán)境用axios獲取數(shù)據(jù) let column1 = [{ 'kid': 0, 'text': '請(qǐng)選擇' }, { 'kid': 1, 'text': '一年級(jí)' }, { 'kid': 2, 'text': '二年級(jí)' }]; let column2 = { '1': [{ 'kid': 1, 'text': '一組' }, { 'kid': 2, 'text': '二組' }, { 'kid': 3, 'text': '三組' }], '2': [{ 'kid': 4, 'text': '四組' }, { 'kid': 5, 'text': '五組' }] } let column3 = { '1': [{ 'kid': 1, 'text': '小明' }, { 'kid': 2, 'text': '小紅' }, { 'kid': 3, 'text': '小剛' }], '2': [{ 'kid': 4, 'text': 'Amy' }, { 'kid': 5, 'text': 'Sam' }], '3': [{ 'kid': 4, 'text': 'Sion' }, { 'kid': 5, 'text': 'Juno' }], '4': [{ 'kid': 6, 'text': 'Lucy' }, { 'kid': 7, 'text': 'Tom' }], '5': [{ 'kid': 6, 'text': 'Iwan' }] } let columns = []; columns = [{ values: column1, defaultIndex: 0 //默認(rèn)選中項(xiàng)索引 }, { values: [], defaultIndex: 0 }, { values: [], defaultIndex: 0 } ]; this.stuColumn2 = column2; this.stuColumn3 = column3; this.stuLoad = columns; }, stuConfirm(value, index) { // 下方彈出層點(diǎn)擊確認(rèn)時(shí)觸發(fā) // value為各列選中值 // index為各列選中的索引 if (index.indexOf(0) > -1) { alert('請(qǐng)選擇'); } else { let content = value[0]['text'] + ' / ' + value[1]['text'] + ' / ' + value[2]['text']; this.student = content; this.stuShow = false; } }, stuChange(picker, value, index) { // 選擇器改變時(shí)觸發(fā) // Picker 實(shí)例 // value為當(dāng)前選中值 // index為當(dāng)前列對(duì)應(yīng)的索引,第一列index為0,第二列index為1,依次列推 if (index == 0) { // 改變第一列的值 let i = value[0]['kid']; let item = this.stuColumn2[i] ? this.stuColumn2[i] : []; if (item && item[0]['text'] != '請(qǐng)選擇') { item.unshift({ 'kid': 0, 'text': '請(qǐng)選擇' }) } picker.setColumnValues(1, item); // 給對(duì)應(yīng)的列賦值,第一個(gè)參數(shù)為列的index值,第二個(gè)參數(shù)為列的values } else if (index == 1) { let i = value[1]['kid']; let item = this.stuColumn3[i] ? this.stuColumn3[i] : []; if (item.length != 0 && item[0]['text'] != '請(qǐng)選擇') { item.unshift({ 'kid': 0, 'text': '請(qǐng)選擇' }) } picker.setColumnValues(2, item); } } } }; </script> <style scoped> .text { text-align: right; } </style>
補(bǔ)充知識(shí):vue vant-picker選擇器的使用,及數(shù)據(jù)結(jié)構(gòu)的寫法
vant-picker組件columns屬性接收的是一個(gè)數(shù)組,如官方例子中:
它的數(shù)組是子項(xiàng)是一個(gè)簡單是字符,但通常我們真實(shí)的數(shù)據(jù)子項(xiàng)都是對(duì)象,如:
colums:[ {name:'張三',age:18},{name:'李四',age:28}]
那么像這樣的數(shù)組該怎么顯示呢, vant-picker的value-key屬性就是解決這個(gè)問題的,如我要使用上面的數(shù)組,那么vant-picker
就是這樣
另外,如果數(shù)組中的子項(xiàng)含有鍵名為'text',那么value-key也可以不用設(shè)置,組件會(huì)默認(rèn)取這個(gè)鍵名,如colums:[ {text:'張三',age:18},{text:'李四',age:28}]
關(guān)于在vant中使用 picker+popup 實(shí)現(xiàn)一個(gè)三級(jí)聯(lián)動(dòng)問題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。