vue使用vant 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>

//这是我的后台传过来的数据,我将这个数据加到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
  })

 @click-nav代码部分已经写了
 onNavClick(index) {
  console.log(index) 
  let substationCode = this.items[index].activeId //这是我们通过index获取到当前点击的值
  this.requestPoliceList(substationCode) //这是请求右侧列表的请求通过activeId去请求。
 },