1、在视图区添加级联选择框

202109081631069970496041

(1)v-model=“selectedCateKeys”:绑定数据

202109081631070165546045

(2):options=“catelist”:储存分类列表数据

202109081631070238160150

(3)expandTrigger=“hover”:划过就自动展示下一列

(4):props=“cateProps”:级联选择框的配置对象

202109081631075469950337

value 指定选项的值为选项对象的某个属性值 string — ‘value’
label 指定选项标签为选项对象的某个属性值 string — ‘label’
children 指定选项的子选项为选项对象的某个属性值 string — ‘children’

(5)@change=“handleChange”:内容改变后的触发函数

202109081631085002205350

2、创建生命周期create函数,访问接口获取数据

202109081631075136754515

将获取到的数据解构赋值给res

res.data:

202109081631075250521469

3、大致流程

(1)进入页面访问接口获取上图res.data数据

(2)然后根据:props="cateProps"中的配置对象,这时候就可以渲染出来级联选择框

(3)将用户选择的数据通过v-model双向绑定存储到selectedCateKeys中

(4)当级联选择框的值发生变化时触发handleTabClick中的getParamsData函数,对selectedCateKeys中的数据进行判断,当数据长度小于三的时候,说明只选择到了二级

这时就应该不显示所选项,只有选择三级分类才能请求数据