使用element-ui记录--多级联动的使用

使用原因

因为在写毕设，遇到了一个需求，需要多级联动：

需要在换专业班级的时候，先显示现有的专业，然后点击专业的时候，再显示属于这个专业下面的班级。
所以选择了element-ui里面的多级联动组件Cascader。

使用步骤

1、使用cascader组件

  <el-cascader class="cascader" @change="cascaderChange" :props="changeSpacity"></el-cascader>

其中，change事件：于最后一级选项被选中时候触发，会返回给函数一个所有选项值的值。
props：是一个对象，里面放着你要往cascader组件注入的值。

2、编写changeSpecity

 changeSpacity: {
        lazy: true,//表示是否动态加载子节点。
        lazyLoad(node, resolve) {//如果开启动态加载，则这个是动态加载时候的事件
        //其中两个值，一个node，用于存储最后一个被点击的层级的值。放于node.value中。
        //resolve用以告诉cascader，要将值渲染其上，格式如下文所述
          setTimeout(() => {
            if (node.level == 0) {//每个层级的node都有个level，表示层级数，这里是层级数为0时
            //因为这里是在vue中使用element-ui，且这个changeSpacity其实是放在states中的。
            //所以，无法通过this，直接获取states中的其他属性，和绑定在vue原型中的axios。
            //所以，我们需要全局，即在.vue文件中的<script>这个标签下面，直接引用一个例如:import axios from '../../http'
            //如果想在下一个节点中使用上上个节点的值来作为请求条件的话，也可以全局定义一个变量，然后通过变量获取。
              axios
                .get("rest/Specialty")
                .then(res => {
                  const specialty = res.data.map((value, i) => ({
                    value: value._id,//这个是点击后，存给node.value的值
                    label: value.name,//这个是显示在cascader选项上面的值
                    leaf: node.level >= 1//这个是用以告诉cascader如何判断是不是最后一个叶子结点，即最后一个层级的值。比如这里的意思是，当node.level大于等于1的时候，它就是最后一个叶子结点。
                  }));
                  resolve(specialty);
                })
                .catch(err => {
                  console.log(err);
                });
            }
            if (node.level == 1) {
              axios
                .get("rest/Class", {
                  params: {
                    superior: node.value,
                    year: tempInfo
                  }
                })
                .then(res => {
                  const classc = res.data.map((value, i) => ({
                    value: value._id,
                    label: value.name,
                    leaf: node.level >= 1
                  }));
                  resolve(classc);
                })
                .catch(err => {
                  console.log(err);
                });
            }
          }, 1000);
        }
      }

3、change事件

根据自己需求来吧
事件传来的值就是一个数组，按照层级每个node.value的顺序的数组。