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

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

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: []
            }
          ]
        }
      ]

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

因此我们的第一步如下

如此我们就能实现一个多级列表

第二个功能 点击展开 关闭

我们的多级列表是展开的，并非是点击展开，因此我们加上以下js代码

此时 我们就可以做到列表的联级展开关闭了。

第三个功能  我们实现数据的绑定  以组件的形式 调用我们的联级选择器

查看element的组件 我们发现它存在一个输入框  并且展开关闭时右侧的箭头都会发生改变 (我将样式直接添加，样式美化这一步直接跳过咯)

我们声明一个casder组件  代码如下

值得注意的有两点 

第一点 关于v-model   它的本质是一个语法糖 ，其本质内容 可以参考以下文章

https://www.cnblogs.com/zqzjs/p/6957310.html?utm_source=debugrun&utm_medium=referral

第二点  我们使用BUS。目的是因为组件的嵌套  我们选择了某个对应的列表项的时候，我们要将选中项返回，这里BUS相当于一个局部的 VUEX 。根据选中的项的改变，调用对应的change函数。

我们的联级选择器代码如下

这是我们现在的样子

此时 一个基本的联级选择器我们就实现了。第一次写轮子的制造(虽然不算是个轮子 ，叫轱辘吧)。还望各位大佬指教。代码已传至github 。文章头即有地址  谢谢star了。