elementUI tree

功能点：1）只有末级知识点才可以选中 2）关键字过滤并高亮同时过滤出子级节点

详细代码：

 <el-tree
            v-show="tree.length"
            show-checkbox
            class="filter-tree"
            :filter-node-method="filterNode"
            ref="tree"
            :data="tree"
            node-key="id"
            :default-expanded-keys="[1]"  // 默认展开某级节点
            :props="{children: 'children',label: 'name'}"
            :check-strictly="true"
            @check="handleChecked" // 当复选框被点击的时候触发 详细参数移步文档https://element.eleme.cn/#/zh-CN/component/tree
            @node-click="handleNodeClick"// 点击节点触发事件
>
                    <span class="custom-tree-node" slot-scope="{ node , data}">
                        <span v-html="format(node.label)"></span>
                    </span>
        </el-tree>
 
 
 
 
watch:{
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
 
 
// 知识点关键字过滤
filterNode (value, data, node) {
    let level = node.level;
    let _array = [];//这里使用数组存储 只是为了存储值。
    this.getReturnNode(node,_array,value);
    let result = false;
    _array.forEach((item) => {
        result = result || item;
    });
    return result;
}
getReturnNode(node,_array,value){
    let isPass = node.data &&  node.data.name && node.data.name.indexOf(value) !== -1;
    isPass ? _array.push(isPass) : '';
    this.index++;
    if(!isPass && node.level!==1 && node.parent){
        this.getReturnNode(node.parent,_array,value);
    }
}
 
 
format(val) {
    let reg=new RegExp(this.filterText,"g");
    return val.replace(reg,'<span style="color: red;">' + this.filterText + '</span>');
}

对于只能末级节点可选择需要使用css进行控制

.knowledgeTree{
    & /deep/ .el-tree-node{
        .el-checkbox{
            display: none;
        }
        .is-leaf + .el-checkbox {
            display: inline-block;
        }
    }
    & /deep/ .el-input--small .el-input__inner{
        height: 36px;
        line-height: 36px;
    }
}