vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue三级联动动态菜单

vue实现三级联动动态菜单

作者:张小欢ㄦ~

这篇文章主要为大家详细介绍了vue实现三级联动动态菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue实现三级联动动态菜单的具体代码,供大家参考,具体内容如下

三级联动动态菜单展示:一级菜单选中,生成二级菜单数据,二级菜单选中,生成三级菜单数据(根据上一级菜单的id,作为请求下一级菜单数据接口的参数)

1、代码

<template>
  <div>
    <!-- inline:代表的是行内表单,代表一行可以放置多个表单元素 -->
    <el-form :inline="true" class="demo-form-inline" :model="cForm">
      <el-form-item label="一级分类">
        <el-select placeholder="请选择" v-model="cForm.Category1Id" @change="handler1">
          <!-- select框v-model收集的是value值,不是label,拿到一级分类的value值,用来获取二级分类的数据 -->
          <el-option :label="c1.name" :value="c1.id" v-for="c1 in list1" :key="c1.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select placeholder="请选择" v-model="cForm.Category2Id" @change="handler2">
          <el-option :label="c2.name" :value="c2.id" v-for="c2 in list2" :key="c2.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select placeholder="请选择" v-model="cForm.Category3Id">
          <el-option :label="c3.name" :value="c3.id" v-for="c3 in list3" :key="c3.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
 
<script>
export default {
  name: "CategorySelect",
  data() {
    return {
      list1: [], //一级分类数据
      list2: [], //二级分类数据
      list3: [], //三级分类数据
      cForm: {
        //收集相应的一级二级分类的id
        Category1Id: "",
        Category2Id: "",
        Category3Id: "",
      },
    };
  },
 
  // 组件挂载完毕,向服务器发请求,获取相应的一级分类的数据
  mounted() {
    // 获取一级分类的数据的方法
    this.getCategory1List();
  },
  methods: {
    // 获取一级分类的数据的方法
    async getCategory1List() {
      let result1List = await this.$API.attr.reqCategory1List();
      if (result1List.code == 200) this.list1 = result1List.data;
    },
    async handler1() {
      // 一级分类的select事件的回调(当一级分类的option发生变化时拿到对应二级分类的数据
      //清除数据
      this.list2 = [];
      this.list3 = [];
      this.cForm.Category2Id = "";
      this.cForm.Category3Id = "";
      let result2List = await this.$API.attr.reqCategory2List(
        this.cForm.Category1Id
      );
      if (result2List.code == 200) {
        this.list2 = result2List.data;
      }
    },
    async handler2() {
      // 二级分类的事件回调(当二级分类的option发生变化时拿到对应三级分类的数据
      //   清除三级分类的数据
      this.list3 = [];
      this.cForm.Category3Id = "";
      let result3List = await this.$API.attr.reqCategory3List(
        this.cForm.Category2Id
      );
      if (result3List.code == 200) {
        this.list3 = result3List.data;
      }
    },
  },
};
</script>
 
<style>
</style>

2、效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文