el-tree使用filter-node-method实现过滤
el-tree使用filter-node-method实现过滤
·
el-tree使用filter-node-method实现过滤:
实现效果:
代码实现:
html部分
<el-input style="width:95%"
v-model="ruleData.keyWord" @input="$forceUpdate()"
:placeholder="$t('warning.Please_enter_the_device_location')"
suffix-icon="el-icon-search">
</el-input>
<el-tree style="padding:15px 0"
ref="treeDom"
:filter-node-method="filterNode"
:data="ruleData.data"
:props="ruleData.defaultProps"
node-key="id"
check-on-click-node
:expand-on-click-node="false"
:current-node-key="ruleData.currentKey"
:highlight-current="true"
:default-expand-all="true"
@node-click="handleNodeClick">
</el-tree>
data()定义部分
data(){
return {
ruleData:{
data:[],
currentKey:-1,
keyWord:"",
defaultProps: {
children: 'children',
label: 'locationName',
value:"id"
},
},
}
}
watch监听输入框文本
watch:{
'ruleData.keyWord':function(val){
val = val.replace(/(^\s*)|(\s*$)/g, "");
this.$refs.treeDom.filter(val);
}
},
methods中定义树节点过滤函数fliterNode
filterNode(value, data) {
if (!value) return true;
return data.locationName.indexOf(value) !== -1;
},
更多推荐
已为社区贡献1条内容
所有评论(0)