el-cascader自定义搜索功能before-filter

需求：因为数据有重复名字的数据，但code是不相同的，就是虽然是相同名字，但其实是不同数据,又不能在原数据上直接做出区分

即不能用自带的搜索功能，决定自定义搜索功能，在el-cascader的输入框中根据输入的字符，通过后端接口去查做了区分的数据

但回显的时候，还是回显到原数据上。

在element ui官方文档中，有关于自定义搜索功能的描述

当时在做这个的时候，网上搜出来的都是用filter-method，但用filter-method尝试了几次也不知道哪里出了问题，反正都不行。问了同事后，用了before-filter这个钩子。

实现代码：

这里使用到了 async await将异步的接口请求改为同步方法，以及let {data:riverData}=的解构赋值。

还有个需要注意的，即在失去焦点或选择了数据要还原成原始数据，因为你搜索了之后，如果没选择数据，关闭选择器再打开的时候，树的数据会变成上次搜索返回的数据，所以需要在失去焦点的时候还原成原始数据，以及选择了数据后也要还原成原始数据，这样回显的时候才是在原始数据上回显。

el-cascader自定义搜索功能before-filter相关推荐

vue实现自定义搜索功能
vue实现自定义搜索功能需要使用computed函数,具体代码实现如下: <template><div v-theme:column="'narrow'" id= ...
vue项目中使用百度地图api完成自定义搜索功能（包含搜索详细地理位置）
需求描述: 在vue项目中,有时候,我们需要自定义百度地图的一些功能.譬如,现在的需求,就是需要自定义搜索内容和结果展示. 类似如下页面的功能: 首先在vue项目中,我们可以使用 vue-baidu- ...
bootstrap-table的使用（3）--自定义搜索功能，数据库查询一个时间段内的内容并显示为例
自定义搜索功能 bootstrap-table是自带搜索功能的,但是搜索功能比较单一,如果我们有特殊的要求,那么需要自己写一个搜索功能,主要是应用于进行数据库查询,并将结果展示. 大致流程为: 1.利 ...
使用vue实现自定义搜索功能
实现效果如:http://www.ligerui.com/demos/filter/filter.htm 代码: <%@ Page Language="C#" AutoEve ...
Select 选择器自定义筛选功能（支持简拼\全拼\汉字搜索）
引入formate.js import formate from "util/formate"; formate.js: /*** Created by zhouli on 201 ...
layui自定义查询条件html页面,Layui的数据表格+springmvc实现搜索功能的例子_飛雲_前端开发者...
如下所示: 主要在前端页面加: 搜索ID: userid content 搜索在 reload:function () { var keyWord=$("#keyWord").v ...
POSCMS 后台自定义链接友情链接增加搜索功能
后台友情太多.管理是个问题.所以增加搜索功能.可以快速定位并删除一,修改/diy/dayrui/controllers/admin/Navigator.phppublic function inde ...
SpringBoot+Es7.6.1+Jsoup+Vue+Docker打造古诗词实时搜索功能
文章目录服务安装下载安装elasticsearch 安装elasticsearch head插件新建索引安装Kibana 安装ik分词器 ElasticSearch基本操作操作说明常用操作 ...
gi克隆github文件_如何构建GitHub文件搜索功能的克隆
gi克隆github文件 In this article, we will build a project that mimics the lesser known but awesome file ...

el-cascader自定义搜索功能before-filter

el-cascader自定义搜索功能before-filter相关推荐

最新文章

热门文章