vue中使用vant中TreeSelect 分类选择组件

在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渲染右侧的数据