element-ui el-tree的用法与过滤搜索，单选高亮效果

Posted 2021-09-03 墨子鱼

1、el-tree用法
<el-tree class="filter-tree"
@node-click="handleNodeClick" //点击事件
:data="data" //数据
:props="defaultProps"
default-expand-all //全部展开
:filter-node-method="filterNode" //过滤搜索
node-key="id" //绑定id
:highlight-current="true" //高亮效果
check-on-click-node //点击节点
:current-node-key="selectMrid" //当前选中节点
ref="tree" //ref
:indent="indentPx"
:render-content="renderContent">
</el-tree>

2、过滤搜索
watch: {

filterText(val) {
    this.$refs.tree.filter(val);
},

},

3、默认高亮效果，单选高亮效果，更改效果
this.$nextTick(() => {

this.$refs.tree.setCurrentKey(this.selectMrid); //一定要加这个选中了否则样式没有出来

});