vue使用vant TreeSelect實(shí)現(xiàn)分類選擇組件

 //先在你需要的頁(yè)面中引入，第一個(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>

//這是我的后臺(tái)傳過(guò)來(lái)的數(shù)據(jù),我將這個(gè)數(shù)據(jù)加到items里面去，左側(cè)的數(shù)據(jù)將就展示出來(lái)了，注意這里是循環(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
  })

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