el-cascader实现服务器搜索

el-cascader实现服务器搜索

---

---

前言

这里主要是记录开发过程中，因需要用到级联选择器，以及搜索功能，而官方文档未有服务器搜索的，所以这样记录一下，开发过程以及遇到的问题。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、产品需求

需要根据用户输入的进行实时请求服务器数据

二、使用步骤

1.基本使用

代码如下（示例）：

		<el-cascader
            placeholder=""
            filterable
            :props="defaultParams"
            :options="computedOptions"
            :clearable="true"
            v-model="value"
            @change="changeValue"
          ></el-cascader>

基本到这里就是可支持搜索的了，但是不能实时获取用户的输入。

2.解决用户实时输入问题

看了官方文档，并没有提供获取实时输入的方法，所以查看源码之后，发现可以使用@input.native来获取实时的用户数据，所以上面的代码修改为

<el-cascader
            placeholder=""
            filterable //可搜索配置
            :props="defaultParams"
            :options="computedOptions" // 这个是后端返回的数据，我这边采用computed，这样就可以实时更新数据了
            :clearable="true"
            v-model="value"
            @input.native="iptChange" // 加入获取实时用户输入
            @change="changeValue"
          ></el-cascader>

问题又来了，实时获取用户的操作，请求api,太频繁，所以加入防抖，官方文档有该属性，但是我实际使用的时候没起效果。如果有哪位大佬知道，麻烦告知一哈，所以我用了我自己写的防抖。这里就不贴防抖的代码了，不知道的可以搜一哈。

iptChange: debounce(function (el) {
      //el.target.value就是实时的用户输入，
      // 建议加个判断
      let val = el.target.value;
      if (val) {
			// 这里放入请求api操作
		} else {
			// 这里是用户情况数据的时候，可以把初始的数据重置放这里
		}
    }, 500),

---

3.数据过滤问题

看了文档，element提供两种方法，filter-method和before-filter。filter-method会拿取初始化的dom过滤，因需要请求服务器，所以多多少少会有点延迟，filter-method拿不到更新后的dom,所以不适合用。before-filter就简单了，直接return false就可以更新为后端返回的数据。

总结

本文主要讲的是开发中，因需要用到el-cascader的级联选择器，并且需要支持可搜索的开发过程。