快捷導(dǎo)航

在vue中使用vant TreeSelect分類選擇組件操作

更新時(shí)間：2020年11月02日 12:09:56 作者：月落星河°

這篇文章主要介紹了在vue中使用vant TreeSelect分類選擇組件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

效果展示：

 //先在你需要的頁面中引入，第一個(gè)是彈出層,第二個(gè)是選擇的
 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>

現(xiàn)在我來解析我的業(yè)務(wù)邏輯，希望對(duì)你能有幫助：

1.首先:items,是個(gè)數(shù)組，我們需要給它傳個(gè)數(shù)組過去，用來展示左側(cè)的數(shù)據(jù)

//這是我的后臺(tái)傳過來的數(shù)據(jù),我將這個(gè)數(shù)據(jù)加到items里面去，左側(cè)的數(shù)據(jù)將就展示出來了，注意這里是循環(huán)的數(shù)據(jù)，我為了簡(jiǎn)單這么寫了，還有items中的key盡量用text，要不會(huì)渲染不上，在picker上面是有個(gè)value-key去改變的，這一會(huì)兒在下一篇文章中講
{
 "code": 200,
 "message": "success",
 "data": [
  {
   "substationCode": "1101010000",
   "substationName": "東城區(qū)分局"
  },
  {
   "substationCode": "100002",
   "substationName": "昌平區(qū)分局"
  },
  {
   "substationCode": "100003",
   "substationName": "海淀區(qū)分局"
  },
  {
   "substationCode": "100001003",
   "substationName": "海淀區(qū)分局"
  },
  {
   "substationCode": "1010101",
   "substationName": "昌平區(qū)分局"
  },
  {
   "substationCode": "1010101\t",
   "substationName": "111"
  },
  {
   "substationCode": "1000021",
   "substationName": "測(cè)試重復(fù)分局"
  },
  {
   "substationCode": "12223",
   "substationName": "河北分局"
  }
 ]
}
  this.items.push({
    activeId:substationCode,
    text:substationName
  })

2.我們要根據(jù)左側(cè)的數(shù)據(jù)去渲染右側(cè)的數(shù)據(jù)（右側(cè)的數(shù)據(jù)是自定義的，所以你自己加事件就行）

 @click-nav代碼部分已經(jīng)寫了
 onNavClick(index) {
  console.log(index) 
  let substationCode = this.items[index].activeId //這是我們通過index獲取到當(dāng)前點(diǎn)擊的值
  this.requestPoliceList(substationCode) //這是請(qǐng)求右側(cè)列表的請(qǐng)求通過activeId去請(qǐng)求。
 },

總結(jié)：

1.渲染左側(cè)，將后臺(tái)給你的值push到items里面（注意只能使用text）

2.通過@click-nav獲取當(dāng)前的index并拿到id

3.通過id渲染右側(cè)的數(shù)據(jù)

補(bǔ)充知識(shí)：vue-treeselect的自定義部分說明和使用心得

在vue中出現(xiàn)了各種各樣的框架，vue-treeselect就是vue的樹選擇；就是基于vue的多選組件

在平常的情況下一般我把vue-treeselect再次封裝一遍為自己業(yè)務(wù)提供便利

當(dāng)然它的功能還是有很多的例如：?jiǎn)芜x、多選、模糊搜索、清除等等

不說廢話了直接看代碼吧

咱們來一個(gè)一個(gè)說明一下吧

首先命名一個(gè)樹的名字，到時(shí)候組件調(diào)用的時(shí)候好調(diào)用也就是name

之后是透?jìng)鞯膮?shù)和數(shù)據(jù)配置props組件肯定是子的嘛，props中的東西都是可以從父級(jí)里面透?jìng)鬟^來的

template就是我所需要的的vue-treeselect的組件模板

data就是我子組件的數(shù)據(jù)參數(shù)

當(dāng)然在這個(gè)TgElTreeSelect你還可以放入methods、vue中的生命周期、計(jì)算屬性、偵聽器等等

props中的透?jìng)鞯膮?shù)

props里面可以有數(shù)據(jù)value也就是初始化的數(shù)據(jù)，dataList就是你的接口數(shù)據(jù)，接下來的就是你選擇之后渲染的屬性和上傳的屬性了，說的直白一點(diǎn)就是下拉中的label和value當(dāng)然上面對(duì)應(yīng)的就是我的labelField和selectField，之后的屬性就是樹形折疊屬性，

defaultExpandLevel就是從哪一級(jí)來時(shí)折疊展開，

defaultExpandAll就是全部展開或者折疊

multiple是否為多選

disabled這個(gè)就是可選擇與不可選擇

validateEvent驗(yàn)證必填與不必填的屬性

clearable是否有清除的屬性

當(dāng)然我也把我完整的代碼粘出來