溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vue使用vant TreeSelect實現分類選擇組件？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
中文文檔：TreeSelect 分類選擇
效果展示：
//先在你需要的頁面中引入，第一個是彈出層,第二個是選擇的
import { Popup } from "vant";
import { TreeSelect } from "vant";代碼部分：
<van-popup v-model="policeShow" position="top" :overlay="true">
<van-tree-select
:items="items"
:active-id.sync="items.activeId"
:main-active-index.sync="items.activeId"
@click-nav="onNavClick"
>
<template slot="content" >
<ul class="right-content">
<li v-for="(item,index) in policeList" :key="index" :class="{active:policeCode==item.policeCode}" @click="onItemClick(item.policeName,item.policeCode)"> {{item.policeName}} </li>
</ul>
</template>
</van-tree-select>
<div class="btn" @click="onPoliceClick">完成</div>
</van-popup>現在我來解析我的業務邏輯，希望對你能有幫助：
1.首先:items,是個數組，我們需要給它傳個數組過去，用來展示左側的數據
//這是我的后臺傳過來的數據,我將這個數據加到items里面去，左側的數據將就展示出來了，注意這里是循環的數據，我為了簡單這么寫了，還有items中的key盡量用text，要不會渲染不上，在picker上面是有個value-key去改變的，這一會兒在下一篇文章中講
{
"code": 200,
"message": "success",
"data": [
{
"substationCode": "1101010000",
"substationName": "東城區分局"
},
{
"substationCode": "100002",
"substationName": "昌平區分局"
},
{
"substationCode": "100003",
"substationName": "海淀區分局"
},
{
"substationCode": "100001003",
"substationName": "海淀區分局"
},
{
"substationCode": "1010101",
"substationName": "昌平區分局"
},
{
"substationCode": "1010101\t",
"substationName": "111"
},
{
"substationCode": "1000021",
"substationName": "測試重復分局"
},
{
"substationCode": "12223",
"substationName": "河北分局"
}
]
}
this.items.push({
activeId:substationCode,
text:substationName
})2.我們要根據左側的數據去渲染右側的數據（右側的數據是自定義的，所以你自己加事件就行）
@click-nav代碼部分已經寫了
onNavClick(index) {
console.log(index)
let substationCode = this.items[index].activeId //這是我們通過index獲取到當前點擊的值
this.requestPoliceList(substationCode) //這是請求右側列表的請求通過activeId去請求。
},總結：
1.渲染左側，將后臺給你的值push到items里面（注意只能使用text）
2.通過@click-nav獲取當前的index并拿到id
3.通過id渲染右側的數據
補充知識：vue-treeselect的自定義部分說明和使用心得
在vue中出現了各種各樣的框架，vue-treeselect就是vue的樹選擇；就是基于vue的多選組件
在平常的情況下一般我把vue-treeselect再次封裝一遍為自己業務提供便利
當然它的功能還是有很多的例如：單選、多選、模糊搜索、清除等等
不說廢話了直接看代碼吧
咱們來一個一個說明一下吧
首先命名一個樹的名字，到時候組件調用的時候好調用也就是name
之后是透傳的參數和數據配置props組件肯定是子的嘛，props中的東西都是可以從父級里面透傳過來的
template就是我所需要的的vue-treeselect的組件模板
data就是我子組件的數據參數
當然在這個TgElTreeSelect你還可以放入methods、vue中的生命周期、計算屬性、偵聽器等等
props中的透傳的參數
props里面可以有數據value也就是初始化的數據，dataList就是你的接口數據，接下來的就是你選擇之后渲染的屬性和上傳的屬性了，說的直白一點就是下拉中的label和value當然上面對應的就是我的labelField和selectField，之后的屬性就是樹形折疊屬性，
defaultExpandLevel就是從哪一級來時折疊展開，
defaultExpandAll就是全部展開或者折疊
multiple是否為多選
disabled這個就是可選擇與不可選擇
validateEvent驗證必填與不必填的屬性
clearable是否有清除的屬性
當然我也把我完整的代碼粘出來
當然給一個說明唄在這里我使用了requirejs通過define的屬性也就是所謂的AMD來再次封裝這個組件，首頁先npm安裝vue-treeselect
npm install --save @riophae/vue-treeselect
Vue.component('treeselect', VueTreeselect.Treeselect)
上面的這句代碼就是下載完之后引入treeselect
看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
