vue Element 利用Cascader 级联选择器实现三层选择器

在这次项目需求中要实现的功能和选择地址的过程是很相似的，就用选择地址的过程来举例：首先是选择省，然后是市，再是某个区。在实际的开发过程中这种场景是很常见的，所以我就分享一下我的实现过程。

效果图

实现过程

实现这个功能需要用到Element这个框架中的Cascader 级联选择器，但是不是那个Cascader 级联选择器都适用于这种场景，其中我选择了Cascader 级联选择器中的动态加载选择器，链接 --> 添加链接描述
这个选择器的好处就像你看到的那样它可以：动态加载，这也就意味着可以把我们的数据动态的接入到选择器当中，体验就很好。

代码

HTML:

<el-cascader
  ref="cascader"
  :props="casProps"
  style="width:300px"
  filterable
  :options="projectAllList"
  clearable
  @change="handleChange">
</el-cascader>

JS:

data () {
   
    return {
   
      projectAllList: [{
   
        projectId: '',
        projectName: '',
        name:''
      }],
      casProps: {
   
        value: 'projectId',
        label: 'projectName',
        lazy: true, // 此处必须为true
        lazyLoad: (node, resolve) => {