而对于树列表,可以进行一个过滤处理操作,如下界面所示。
在内容区增加一个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过滤的绑定值,变化就进行过滤处理。