【el-tree查询并高亮】vue使用el-tree组件,搜索展开并选中对应节点,高亮搜索的关键字,过滤后高亮关键字,两种方法

第一种(直接展开并高亮关键字)

效果图这样的,会把所有的有这些关键字的节点都展开
【el-tree查询并高亮】vue使用el-tree组件,搜索展开并选中对应节点,高亮搜索的关键字,过滤后高亮关键字,两种方法_第1张图片
代码:
这里的逻辑就是通过递归循环把所有和关键字匹配的节点筛选出来
然后通过setCheckedKeys方法把他展开选中
然后通过filterReal把关键字高亮标蓝

<body>
    <div id="app" style="padding:10px;">
        <!-- 查询框 -->
        <input class="el-textarea__inner" v-model.lazy="title" placeholder="请输入菜单名称"
            style="margin-left:10px;width: 220px;" @keyup.enter="getlists"></input>
        <!-- 树形菜单 -->
        <el-tree :data="data2" node-key="id" :props="defaultProps"
            :highlight-current="gaoliang" :default-expanded-keys="openkeys" :default-expand-all="closed"
            :show-checkbox='show_checkboxd' ref="tree2">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span v-html="$options.filters.filterReal(node.label, title)"></span>
            </span>
        </el-tree>
    </div>
</body>
<script type="text/javascript">
    let v = new Vue({
        el: '#app',
        filters: {
            filterReal(value, key) {
                const ind = value.indexOf(key);
                if (value.includes(key))
                    return (
                        value
                        .split("")
                        .slice(0, ind)
                        .join("") +
                        '' +
                        key +
                        "" +
                        value
                        .split("")
                        .slice(ind + key.length)
                        .join("")
                    );
                return `${value}`;
            },
        },
        data() {
            return {
                data2: [],//列表
                defaultProps: {
                    children: 'children',
                    label: 'title'
                },
                title: '',//查询
                openkeys:[]
            }
        },
        methods: {
            getlists() {
                // this.$refs.tree2.filter(this.title);
                // return
                let that = this
                if (that.title != '') {
                    that.openkeys = []
                    that.$refs.tree2.setCheckedKeys(that.openkeys);//清空节点选择,节点收起
                    let arr = []
                    that.openkeys = this.getAllId(arr, this.data2) //递归拿到查询的所有关键字节点id
                    that.$refs.tree2.setCheckedKeys(that.openkeys)//根据这些id展开节点
                }
            },
            // 递归:查询tree
            getAllId(keys, dataList) {
                let that=this
                if (dataList && dataList.length) {
                    for (let i = 0; i < dataList.length; i++) {
                        if(dataList[i].title.includes(that.title)){
                            keys.push(dataList[i].id) //查询关键字相同的id添加进去
                        }
                        if (dataList[i].children) {
                            keys = this.getAllId(keys, dataList[i].children)
                        }
                    }
                }
                return keys
            },
        }
    })
</script>
<style scoped>

</style>

</html>

第二种(过滤之后再关键字高亮)

这个是用的官方文档的那个过滤方式,可以参考官方文档看一下。
只不过高亮关键字用这里的
核心写法和上面一样,变动的只有两个地方
1,在tree标签上加上这句话:filter-node-method="filterNode"这个方法复制下面的,
只需要把data.title修改成你字段的名字就行,比如你的字段叫name就是data.name。
如果是lable就是data.lable。其他的不用动
2,差的时候调用这个this.$refs.tree2.filter(this.title);里面的title就是你搜索的值

<body>
    <div id="app" style="padding:10px;">
        <!-- 查询框 -->
        <input class="el-textarea__inner" v-model.lazy="title" placeholder="请输入菜单名称"
            style="margin-left:10px;width: 220px;" @keyup.enter="getlists"></input>
        <!-- 树形菜单 -->
        <el-tree :data="data2" node-key="id" :props="defaultProps"
            :highlight-current="gaoliang" :default-expanded-keys="openkeys" :default-expand-all="closed"
            :show-checkbox='show_checkboxd' ref="tree2" :filter-node-method="filterNode">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span v-html="$options.filters.filterReal(node.label, title)"></span>
            </span>
        </el-tree>
    </div>
</body>
<script type="text/javascript">
    let v = new Vue({
        el: '#app',
        filters: {
            filterReal(value, key) {
                const ind = value.indexOf(key);
                if (value.includes(key))
                    return (
                        value
                        .split("")
                        .slice(0, ind)
                        .join("") +
                        '' +
                        key +
                        "" +
                        value
                        .split("")
                        .slice(ind + key.length)
                        .join("")
                    );
                return `${value}`;
            },
        },
        data() {
            return {
                data2: [],//列表
                defaultProps: {
                    children: 'children',
                    label: 'title'
                },
                title: '',//查询
                openkeys:[]
            }
        },
        methods: {
            filterNode(value, data) {
                if (!value) return true;
                return data.title.indexOf(value) !== -1;
            },
            getlists() {
                 this.$refs.tree2.filter(this.title);
            },
        }
    })
</script>

你可能感兴趣的:(功能实现,vue.js,elementui,javascript,el-tree,tree过滤选中高亮)