需求：此級聯選擇器一共有兩層數據，父節點的數據和子節點的數據分別從不同接口獲取。

效果：

image.png

template中：

 <el-form-item label="分支">
          <el-cascader ref="casader" v-model="params.projectVersionId" :props="childrenProps" :options="projectList"
            :show-all-levels="false" key="casader" v-loadCascader="loadMore" clearable filterable
            :before-filter="beforeFilter" @input.native="inputEnter" placeholder="請選擇分支" @change="projctChangeFn">
          </el-cascader>
</el-form-item>

script中：

export default {
  data() {
    return {
      params: {
        projectVersionId: ''
      },
      // 父節點-篩選
      projectList: [],
      maxPage: '', // 接口返回最大有幾頁（每頁10條數據）
      projectParams: {
        pageNo: 1,
        limit: 10,
        projectName: '',
        resourceCode: 1
      },

      // 子節點-篩選
      childrenProps: {
        lazy: true,
        leaf: 'leaf',
        lazyLoad: (node, resolve) => {
          if (!node.value) {
            return
          }
          const data = {
            isStrategy: false
          }
          this.$api.taskApi
            .taskVersion(node.value,data)
            .then((res) => {
              if (res.data) {
                const nodes = res.data.map(item => ({ label: item.versionName, value: item.id, leaf: 1 }))
                resolve(nodes);
              }
            })
            .catch((res) => {
              this.$message({
                message: res.msg,
                type: 'error'
              })
              resolve([]);
            })
        }
      }
  }
 },
  mounted() {
    this.init()
  },
  methods: {
    init() {
        this.getProjectListFn();
    },
  // 獲取父級節點列表
    getProjectListFn() {
      this.$api
        .projectList(this.projectParams)
        .then((res) => {
          if (res.data && res.data.list) {
            this.maxPage = Math.ceil(res.data.total / 10)
            let newData = this.handleProjectData(res.data.list)
            this.projectList.push.apply(this.projectList, newData)
          }
        })
        .catch(() => {
          this.projectList = []
        })
    },

    handleProjectData(data) {
      return data.map(item => {
        return { label: item.name, value: item.id, children: [] }
      })
    },

    // 下滑加載更多
    loadMore() {
      if (this.projectParams.pageNo < this.maxPage) {
        this.projectParams.pageNo++
        this.getProjectListFn()
      }
    },

    beforeFilter() {
      return false;
    },

    //模糊搜索
    inputEnter() {
      let ref = this.$refs["casader"];
      setTimeout(() => {
        this.projectList = []
        this.projectParams.pageNo = 1
        this.projectParams.projectName = ref.inputValue
        this.getProjectListFn()
      });
    },

    projctChangeFn(val) {
      this.params.projectVersionId = val.length == 2 ? val[1] : ''
      this.$refs.table.loadData({ ...this.params })
    },
 }
}

main.js中新增一個el-cascader的下滑觸底事件

// el-cascader 滾動加載更多
Vue.directive("loadCascader", {
  bind(el, binding) {
    const cascaderDom = el.querySelector(
      ".el-cascader__dropdown .el-cascader-menu__wrap"http:// 滾動條所在元素
    );
    if (cascaderDom) {
      cascaderDom.addEventListener("scroll", function () {
        const condition =
          this.scrollHeight - this.scrollTop <= this.clientHeight;
        if (condition) {
          let temp = this.scrollTop;
          binding.value();
          setTimeout(() => {
            this.scrollTop = temp + 100;// 滾動加載更多時，顯示的數據在上次位置基礎上往上滑動100
          }, 0)
        }
      })
    }
  }
})

補充：
在el-cascader中使用lazyLoad，使用箭頭函數的形式，里面的this指向就不會有問題。