vue三级联动下拉列表怎么实现,vue左右联动菜单
本文主要详细介绍vue三级联动动态菜单的实现。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享vue实现三级联动动态菜单的具体代码，供大家参考。具体内容如下
三级联动动态菜单显示：选择一级菜单时，生成二级菜单数据，选择二级菜单时，生成三级菜单数据(根据上一级菜单的id，作为参数请求下一级菜单的数据接口)
1、代码
模板
差异
！- inline:它表示一个内联表单，这意味着多个表单元素可以放在一行中-
El-form:inline= true class= demo-form-inline :model= c form
El-表单-项目标签=主要分类
El-select placeholder= please select v-model= c form . category 1 id @ change= handler 1
！-选择框v-model收集的是值，不是标签，得到的是一级分类的值，用来获得二级分类的数据-
El-option:label= C1 . name :value= C1 . id v-for= C1 in list 1 :key= C1 . id /El-option
/el-select
/El-表单-项目
El-form-item标签=二级分类
El-select placeholder=请选择 v-model= c form . category 2 id @ change= handler 2
El-option:label= C2 . name :value= C2 . id v-for= C2 in list 2 :key= C2 . id /El-option
/el-select
/El-表单-项目
El-form-item标签=三级分类
El-select placeholder=请选择 v-model= c表单。类别3Id
El-option:label= C3 . name :value= C3 . id v-for= C3 in list 3 :key= C3 . id /El-option
/el-select
/El-表单-项目
/el格式
/div
/模板
脚本
导出默认值{
名称：类别选择，
data() {
返回{
1: []，//一级分类数据
2: []，//二级分类数据
3: []，//三级分类数据
cForm: {
//收集对应的一级和二级分类的id
类别1Id:“”，
类别2Id:“”，
类别3Id:“”，
},
};
},
//组件挂载后，向服务器发送请求，获取对应的一级分类数据。
已安装(){
//获取一级分类数据的方法
this . getcategory 1 list()；
},
方法：{
//获取一级分类数据的方法
异步getCategory1List() {
让result1List=等待这个。$ API . attr . req category 1 list()；
if(result 1 list . code==200)this . list 1=result 1 list . data；
},
异步句柄1() {
//回调一级分类的select事件(当一级分类的选项发生变化时，获取二级分类对应的数据。
//清除数据
this . list 2=[]；
this . list 3=[]；
this . c form . category 2 id=“”；
this . c form . category 3 id=“”；
让result2List=等待此消息。$API.attr.reqCategory2List(
this.cForm.Category1Id
);
if (result2List.code==200) {
this . list 2=result 2 list . data；
}
},
异步处理程序2() {
//二级分类的事件回调(当二级分类的选项发生变化时，获取三级分类对应的数据。
//清除三级分类的数据。
this . list 3=[]；
this . c form . category 3 id=“”；
让result3List=等待这个。$API.attr.reqCategory3List(
this.cForm.Category2Id
);
if (result3List.code==200) {
this . list 3=result 3 list . data；
}
},
},
};
/脚本
风格
/风格
2、效果
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。