中文文檔：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' : @click='onItemClick(item.policeName,item.policeCode)'> {{item.policeName}} </li> </ul> </template> </van-tree-select> <div @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': '1010101t', '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

當然官網上的更全面詳細的可以看看官網的再研究研究

以上這篇在vue中使用vant TreeSelect分類選擇組件操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。