el-cascader级联选择器加载远程数据、默认开始加载固定条、可以根据搜索加载远程数据。

• 加载用户列表分页请求、默认请求20条数据。想添加远程搜索用户功能。原有的方法filter-method不能监听到输入清空数据的时候。这样搜索完无法返回默认的20条数据。
• 直接监听级联选择的v-model绑定的值是无法检测到用户自己输入的。

解决思路：

1. el-cascader 没有提供监听用户输入的内容、要单独获取到input添加监听事件。
2. 添加完事件、可以watch监听下用户的输入。清空输入时候可以重新加载数据。
3. 使用befor-filter先做根据搜索内容请求接口（函数返回true才会执行filter-method）、再调用filter-method返回true就行了。
   
   

下面是个模拟的加载用户列表的demo

<template>
  <div class="page">
    <el-cascader v-model="model.userIds" class="user-cascader" :options="userList" filterable :before-filter="beforeFilterUser"   :filter-method="filterUser" clearable @change="changeUser" >
    </el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: {
        userIds: [],
      },
      userList: [], //用户列表
      search: '',
      timer: null
    }
  },
  watch: {
    //监听搜索内容
    search(val, old) {
      if(this.timer) clearTimeout(this.timer)
      this.timer = setTimeout(async ()=> {
        if(!val) this.loadUserList()
      },300)
    }
  },
  mounted() {
    this.init()
    this.loadUserList()
  },
  methods: {
    //添加监听事件
    init() {
      this.$nextTick(()=> {
        let dom = document.getElementsByClassName('user-cascader')[0]
        let inputDom = document.getElementsByClassName('el-input__inner')[0]
        inputDom.addEventListener('input',(e)=> {
          // console.log(e.target.value,'输入的是')
          this.search = e.target.value
        })
      })
    },
    //加载用户列表
    loadUserList(keyword) {
      // ...
      // this.userList = res.data
    },
    async beforeFilterUser(node, keyword) {
      //先根据关键词加载用户列表 再return true
      await this.loadUserList(keyword)
      return true
    },
    filterUser(node, keyword) {
      return true
    },
    changeUser(val) {
      
    }
  }
}
</script>

<style scoped lang="less">
.page {
  padding: 20px;
}
</style>