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

最新推荐文章于 2024-05-15 16:15:02 发布

接口写好了吗

最新推荐文章于 2024-05-15 16:15:02 发布

阅读量3.3k

点赞数 1

分类专栏：功能实现文章标签： vue.js elementui javascript el-tree tree过滤选中高亮

本文链接：https://blog.csdn.net/seeeeeeeeeee/article/details/131851246

版权

功能实现专栏收录该内容

154 篇文章 90 订阅

订阅专栏

第一种（直接展开并高亮关键字）

效果图这样的，会把所有的有这些关键字的节点都展开
在这里插入图片描述
代码：
这里的逻辑就是通过递归循环把所有和关键字匹配的节点筛选出来
然后通过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("") +
                        '<span class="key-word">' +
                        key +
                        "</span>" +
                        value
                        .split("")
                        .slice(ind + key.length)
                        .join("")
                    );
                return `<span>${value}</span`;
            },
        },
        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("") +
                        '<span class="key-word">' +
                        key +
                        "</span>" +
                        value
                        .split("")
                        .slice(ind + key.length)
                        .join("")
                    );
                return `<span>${value}</span`;
            },
        },
        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>

接口写好了吗

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
1
评论
【el-tree查询并高亮】vue使用el-tree组件，搜索展开并选中对应节点，高亮搜索的关键字，过滤后高亮关键字，两种方法

2，差的时候调用这个this.$refs.tree2.filter(this.title);里面的title就是你搜索的值。1，在tree标签上加上这句话:filter-node-method="filterNode"这个方法复制下面的，只需要把data.title修改成你字段的名字就行，比如你的字段叫name就是data.name。这里的逻辑就是通过递归循环把所有和关键字匹配的节点筛选出来。这个是用的官方文档的那个过滤方式，可以参考官方文档看一下。效果图这样的，会把所有的有这些关键字的节点都展开。
复制链接

扫一扫