中文文档：TreeSelect 分类选择TreeSelect 分类选择效果展示：
//先在你需要的页面中引入，第一个是弹出层,第二个是选择的
import { Popup } from "vant";
import { TreeSelect } from "vant";
//先在你需要的页面中引入，第一个是弹出层,第二个是选择的
import { Popup } from "vant";
import { TreeSelect } from "vant";代码部分：



:items="items"

:active-id.sync="items.activeId"

:main-active-index.sync="items.activeId"

@click-nav="onNavClick"

>





完成





:items="items"

:active-id.sync="items.activeId"

:main-active-index.sync="items.activeId"

@click-nav="onNavClick"

>





完成

现在我来解析我的业务逻辑，希望对你能有帮助：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

})
//这是我的后台传过来的数据,我将这个数据加到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去请求。
},
@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并拿到id3.通过id渲染右侧的数据补充知识：vue-treeselect的自定义部分说明和使用心得补充知识：补充知识：vue-treeselect的自定义部分说明和使用心得在vue中出现了各种各样的框架，vue-treeselect就是vue的树选择；就是基于vue的多选组件在平常的情况下一般我把vue-treeselect再次封装一遍为自己业务提供便利当然它的功能还是有很多的例如：单选、多选、模糊搜索、清除等等不说废话了直接看代码吧咱们来一个一个说明一下吧咱们来一个一个说明一下吧首先命名一个树的名字，到时候组件调用的时候好调用也就是name之后是透传的参数和数据配置props组件肯定是子的嘛，props中的东西都是可以从父级里面透传过来的template就是我所需要的的vue-treeselect的组件模板data就是我子组件的数据参数当然在这个TgElTreeSelect你还可以放入methods、vue中的生命周期、计算属性、侦听器等等props中的透传的参数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)
npm install --save @riophae/vue-treeselectVue.component('treeselect', VueTreeselect.Treeselect)上面的这句代码就是下载完之后引入treeselect当然官网上的更全面详细的可以看看官网的再研究研究以上这篇在vue中使用vant TreeSelect分类选择组件操作就是小编分享给大家的全部内容了，希望能给大家一个参考。