侧边栏壁纸
博主头像
前端学习

行动起来,活在当下

  • 累计撰写 307 篇文章
  • 累计创建 18 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录

vue电商管理—参数分类的级联选择器

Administrator
2022-05-20 / 0 评论 / 0 点赞 / 219 阅读 / 0 字

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中的数据进行判断,当数据长度小于三的时候,说明只选择到了二级

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

0
Vue

评论区