基于vue下拉框n级联动

基于vue实现下拉框的n级联动

热爱前端的小菜

3256人浏览 · 2022-04-26 13:59:33

热爱前端的小菜 · 2022-04-26 13:59:33 发布

项目中不少同仁需要下拉框的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>

有任何疑问都欢迎指出，看到的都会及时回复

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^