循序渐进VUE+Element 前端应用开发(8）--- 树列表组件的使用

而对于树列表，可以进行一个过滤处理操作，如下界面所示。

在内容区增加一个input的文本框进行过滤处理，并绑定对应的属性变量:

<el-input

v-model=“filterText”

placeholder=“输入关键字进行过滤”

clearable

prefix-icon=“el-icon-search”

/>

树列表控件需要增加过滤函数绑定 :filter-node-method=“filterNode”，如下代码所示。

<el-tree

ref=“tree”

class=“filter-tree”

style=“padding-top:10px”

:data=“treedata”

node-key=“id”

default-expand-all

highlight-current

show-checkbox

:filter-node-method=“filterNode”

@check-change=“handleCheckChange”

@node-click=“handleNodeClick”

{ { node.label }}

script的处理代码如下所示，需要watch过滤的绑定值，变化就进行过滤处理。