VUE教你实现element级联选择器 | 多级菜单

最新推荐文章于 2024-10-16 21:13:20 发布

置顶

JustDoIt521

最新推荐文章于 2024-10-16 21:13:20 发布

阅读量2.8w

点赞数 5

分类专栏： vue 文章标签： VUE element

本文链接：https://blog.csdn.net/qq_34119437/article/details/89474796

版权

本文通过Vue和Element库，详细介绍了如何实现一个自定义的级联选择器组件，包括组件嵌套、点击展开/关闭及数据绑定功能。通过递归实现多级列表展示，结合v-model和自定义事件实现数据交互。

摘要由CSDN通过智能技术生成

话不多说先上效果（我也不知道这个鬼录屏工具为什么这么差什么鬼迅捷！！）

github地址 https://github.com/JustDoIt521/selectDemo

本文涉及到的知识点： VUE、BUS、v-model原理、Less

关于element的级联选择器 cascader我想大家应该都用到过，其主要解决了多级列表的选择问题。本文选择性的实现了部分的功能。

第一个功能组件嵌套

如果要让你用vue实现一个列表，你第一反应肯定是用v-for 。那么对于多级列表的每一级都是一样的。因为多级列表的格式基本是一致的，比如我们定义如下的数据格式，每一级都是由一个数组组成，每个数组对象包含两个信息 name nodes。

list: [
        {
          name: 'child_1',
          nodes:[]
        },
        {
          name: 'child_2',
          nodes: [
            {
              name: 'child_2_1',
              nodes: []
            },
            {
              name: 'child_2_2',
              nodes: []
            }
          ]
        },
        {
          name: 'child_3',
          nodes: [
            {
              name: 'child_3_1',
              nodes: [
                {
                  name: 'child_3_1_1',
                  nodes: []
                },
                {
                  name: 'child_3_1_2',
                  nodes: [
                    {
                      name: 'child_3_1_2_1',
                      nodes: []
                    },
                    {
                      name: 'child_3_1_2_2',
                      nodes: []            
                    }
                  ]
                }
              ]
            },
            {
              name: 'child_3_2',
              nodes: []
            }
          ]
        }
      ]

如此相似的结构，如果让你访问其中某个指定数据，你会怎么做，当然是用递归了！因此实现多级列表，我们只需要利用递归思想，实现组件的嵌套即可

因此我们的第一步如下

<template>
  <div id="selectDemo">
    <ul>
      <li v-for="(item,index) in nodes" :key="index">
        <span>
          {
  {item.name}}
        </span>
        <selectDemo :nodes = "item.nodes"></selectDemo>
      </li>
    </ul>
  </div>
</templat