vue+element ui级联选择器实现远程动态加载文件夹目录层级

1.HTML渲染

<template>
  <div class="app-container">
    <el-form
      ref="addRecordForm"
      :model="addRecordForm"
    >
      <el-form-item label="路径" prop="loadpath">
        <el-cascader
          v-model="addRecordForm.loadpath"
          :props="pathProps"
          separator="\"
          clearable
        />
      </el-form-item>
    </el-form>
  </div>
</template>

2.定义变量

data() {
    return {
      addRecordForm: {
        loadpath: []
      },

      // 级联选择器动态加载
      pathProps: {
        checkStrictly: true, // 选择任意级
        lazy: true, // 动态加载
        lazyLoad: this.lazyLoad// 加载方法
      }
    }
  },

3.方法实现

 methods: {
    // 动态加载路径
    lazyLoad(node, resolve) {
      this.getFileDirectory(node, resolve)
    },

    // 获取文件路径
    getFileDirectory(node, resolve) {
      if (node) { // 判断是否有node，有则执行
        const level = node.level
        // debugger
        if (level === 0) { // 一级目录（固定值）
          var result = [{            value: '\\\\192.168.1.1\\loadteam',            label: 'loadteam'          }, {            value: '\\\\192.168.1.1\\loadteam02',            label: 'loadteam02'          }]

          // 返回结果（必写）
          resolve(result)
        } else { // 除一级目录以外的目录（根据接口获取）
          // 1.路径字符串拼接
          var currentPath
          for (var key in node.path) {
            if (key === '0') {
              currentPath = node.path[key]
            } else {
              currentPath = currentPath + '\\' + node.path[key]
            }
          }

          // 2.根据拼接的路径调接口获取下一级路径列表
          var result1 = []
          progressApi.getDirectory({// progressApi:定义的接口请求方法
            directory: currentPath// 请求参数
          }).then(response => {
            // 2.1.获取接口数据
            var dirList = JSON.parse(response.data).dirs.sort()
            console.log(dirList)

            // 2.2.将获取到的路径，重构成为级联选择器所需格式
            for (var index in dirList) {
              result1.push({
                value: dirList[index],
                label: dirList[index]
              })
            }

            // 2.3.返回结果（必写）
            resolve(result1)
          })
        }
      }
    }

  }

4.效果展示

级联选择器的具体使用方法及更多功能请参考官方。