el-tree关键字搜索

今天在开发中，需要做一个el-tree可以进行关键字搜索，效果图如下：

直接上代码：

  <el-col :span="7"><div style="height: 500px;border: 1px solid rgb(234,234,236);padding: 10px;"><div style="font-weight: bolder;margin-bottom: 6px">选择品牌</div><div><el-inputsize="small"clearableplaceholder="请输入品牌名称"v-model="search"></el-input></div><div class="innerbox" style="height:calc(100% - 67px); margin-top: 10px;"><el-treev-loading="loading":filter-node-method="filterNode":default-checked-keys="$store.state.SelectBrandsList"@check="handleCheck"ref="tree"class="tree":data="list"show-checkboxnode-key="brandId":props="defaultProps"></el-tree></div></div></el-col>

data(){return {search:'',}},

watch:{search(val){this.$refs.tree.filter(val);}},

methods:{filterNode(value, data, node) {if (!value) return true;let parentNode = node.parent, labels = [node.label], level = 1while (level < node.level) {labels = [...labels, parentNode.label]parentNode = parentNode.parentlevel++}return labels.some(label => label.indexOf(value) !== -1)},
}

以上就是el-tree关键字搜索的使用，特此记录。

el-tree 关键字搜索相关推荐

vim复制单个字符_vim文本编辑器——删除、复制、剪切、更改某一个字符、替换、撤销、关键字搜索...
1.删除: (1)删除光标所在处的字符: 如上图所示:点击一次x键只能删除一个字符. (2)删除光标所在处后的n个字符(nx): 删除前: 输入6x: (3)删除光标所在的行(dd): 删除前: 输入 ...
JSON 之 SuperObject(16): 实例 - 解析 Google 关键字搜索排名
同上例类似, 通过 'http://clients1.google.cn/complete/search?&q=' + "关键字" 可以获取 Google 的关键字搜索排名 ...
应用跳转到AppStore指定关键字搜索界面
应用跳转到AppStore指定关键字搜索界面 NSString *str = [NSString stringWithFormat: @"https://itunes.apple.com/W ...
Exchange 2010 OWA 无法使用关键字搜索
由于大部分用户使用OWA收发邮件,最近出现OWA界面默认筛选器无法筛选关键字,outlook的关键字搜索正常. 目前为了找到根本原因,可以先执行以下的一些排错步骤: 在搜索关键字时,如果您在已经确认您 ...
SQL Server:关键字搜索
代码 if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[f_search]') and xtype in (N ...
京东API item_search - 按关键字搜索商品
淘宝.京东API item_search - 按关键字搜索商品 Result Object: { "items": { "url": "https:/ ...
唯品会API：item_search - 按关键字搜索vip商品
唯品会按关键字搜索vip商品 API 返回值说明请求参数请求参数:q=鞋子&start_price=&end_price=&page=&cat=&disco ...
唯品会关键字搜索商品API接口（item_search-按关键字搜索唯品会商品API接口），唯品会API接口
一.唯品会关键字搜索商品API接口(item_search-按关键字搜索唯品会商品API接口),唯品会API接口接口可获取到宝贝标题,宝贝价格,宝贝ID,宝贝图片,优惠价,宝贝链接,卖家昵称,店铺所在 ...
京东：按关键字搜索商品 API
一.参数公共参数请求地址: https://api-gw.onebound.cn/jd/item_search 名称类型必须描述 key String 是调用key(必须以GET方式拼接 ...
调用API接口获取和解析京东按关键字搜索商品数据
这篇文章主要介绍了如何调用API接口获取和解析京东按关键字搜索商品数据,帮助大家更好的理解和使用API接口. 点击测试请求示例 <?php// 请求示例 url 默认请求参数已经URL编码处 ...

el-tree 关键字搜索

el-tree关键字搜索

el-tree 关键字搜索相关推荐

最新文章

热门文章