级联选择器，如何动态获取每级文件

级联选择器根据文件路径动态加载

正文开始之前，先来说说我们的项目需求吧。我们这个项目需要做文件权限的处理，为避免文件过多，服务器响应时间长，所以我们的后端兄弟说要分级获取文件数据，那么就想到了级联选择器呀~ 但是级联选择器的数据格式是有自己的规范的，所以在数据处理上面我走了许多的弯路。但是最终让我找到了解决办法，就是级联选择器的动态加载类型。
因为我们的参数要求是文件的路径所以还要涉及路径的拼接，不过也不用担心，级联选择器的动态加载都给我们做好了，下面来看看代码吧：

<el-cascader-panel ref="fileAccess" :props="fileProps" :options="fileOption"></el-cascader-panel>

fileProps: {
        value: 'fileName',
        label: 'fileName',
        checkStrictly: true,
        lazy: true, // 此处必须为true
        lazyLoad: (node, resolve) => {
          // 加载第二级数据的时候触发
          if (node.level) this.getChildFile(node.data, resolve)
        }
      },

动态加载当然需要先渲染第一级数据啊，所以我们要先获取第一级数据

// 获取第一级的文件权限列表
    getFileRightsList() {
      let data = {
        filePath: this.filePath,
      };

      getFileList(data).then((res) => {
        if(res.code == 200) {
          this.fileOption = res.data.total
        } else {
          this.$message.error('获取文件数据失败')
        }
      });
    },

之后就是重头戏，下面的代码直接可以获取多级

// 获取子级数据
    getChildFile (data, resolve) {
      console.log(data,resolve);
      let params = {
      // 这里的data.filePath在获取级层文件的时候会把之前路径都拼接在一起
        filePath: data.filePath + data.fileName + '/'
      }
      let childFile = []
      getFileList(params).then(res => {
        console.log(res,'resrewaceshicehsi');
        if (res.code != 200) {
          this.$message.error('获取文件数据失败')
        } else {
          childFile = res.data.total
          // 获取数据成功后调用resolve将子级数据渲染
          resolve(childFile)
        }
      }).catch(error => {
        // 此处调用resolve 防止接口数据异常时级联选择器一直处于加载状态
        resolve(childFile)
      })
    },

这里是单选，如果需要多选可以去查官网的对应属性----element-ui 官方文档
此条博客借鉴自https://blog.csdn.net/l508742729/article/details/107413590