[JavaScript知识库] 基于vue下拉框n级联动

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 基于vue下拉框n级联动 -> 正文阅读

[JavaScript知识库]基于vue下拉框n级联动

项目中不少同仁需要下拉框的n级联动，目前为止查到的资料个人都觉得不太满意，于是自己写了个能够n级联动的下拉框，希望能帮助大家，先上效果图

在这里插入图片描述

以下是代码，可以复制直接使用，数据是自己编的，主要提供个思路给大家作为参考

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
   <h1>选中的详情：{{detailMsg}}</h1>
   <div v-for="num in chooseArray.length" :key="num">
     <h1>{{num}}级分类</h1>
     <el-select v-model="objArr[num-1]" placeholder="请选择"  >
       <!-- 单纯为el-option绑定单击事件是不生效的，需要为其添加.native 修饰符 -->
      <el-option
      v-for="item in chooseArray[num-1]"
        @click.native="chooseChildrenArr(item)"
        :key="item.id"
        :value="item.name">
        {{item.name}}
      </el-option>
    </el-select>
   </div>
  </div>
  <!-- 引入vue.js文件 -->
  <script src="./vue.js"></script>
  <!-- 引入样式element-ui样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入element-ui组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
   <script>
     const app = new Vue({
       el:"#app",
       data() {
         return {
          //所有下拉框数据
          array: [
            {
              "name": "A",
              "level": 1,
              "parent_id": null,
              "id": 1,
              "children": [
                {
                  "name": "A-A",
                  "level": 2,
                  "parent_id": 1,
                  "id": 4,
                  "children": [
                    {
                      "name": "A-A-A",
                      "level": 3,
                      "parent_id": 4,
                      "id": 10,
                      "children": []
                    },
                    {
                      "name": "A-A-B",
                      "level": 3,
                      "parent_id": 4,
                      "id": 11,
                      "children": []
                    },
                  ]
                },
                {
                  "name": "A-B",
                  "level": 2,
                  "parent_id": 1,
                  "id": 5,
                  "children": []
                },
              ]
            },
            {
              "name": "B",
              "level": 1,
              "parent_id": null,
              "id": 3,
              "children": [
                {
                  "name": "B-A",
                  "level": 2,
                  "parent_id": 3,
                  "id": 8,
                  "children": []
                },
                {
                  "name": "B-B",
                  "level": 2,
                  "parent_id": 3,
                  "id": 9,
                  "children": []
                }
              ],
            },
            {
              "name": "C",
              "level": 1,
              "parent_id": null,
              "id": 99,
              "children": []
            }
          ],
          //选中的下拉框数据
          chooseArray: [],
           // el-select选中的数据
           objArr:[],
          //  选中的数据详情
          detailMsg:''
         }
       
       },
       methods: {
        chooseChildrenArr(val){
          // 每次重新点击下拉框都要清楚，后续下拉框的值，重新为其赋值
          if(val.children.length>0){  //如果选中的元素，其有子元素，那么保留下一级的下拉框
            // this.obj = {}
            this.chooseArray[val.level] = val.children
            this.chooseArray.splice(val.level+1)
            this.objArr.splice(val.level)
          }else {  //如果选中的元素，没有子元素，那么只保留切换的下拉框，清楚其以下的所有下拉框
            this.chooseArray.splice(val.level);
            this.objArr.splice(val.level)
          }
          // 每次重新选择，都将上一次detailMsh清空，防止下一次的选择干扰它
          this.detailMsg = ''
          for(let key in this.objArr){
            this.detailMsg +=(key*1+1)+'级分类:' +this.objArr[key] +' '
          }
        },
       },
       created() {
         var arr= []
         this.array.forEach(ele=>{
           if(ele.level == 1)arr.push(ele)
         })
        /* 
        初始化页面，将数据中一级分类保留放入到要便利的数组中
        其核心思路是
        [[一级下拉框数据],[二级下拉框数据],[三级下拉框]....[n级下拉框]  ]
        */ 
         this.chooseArray[this.chooseArray.length] = arr
       },
     })
   </script>
</body>
</html>