element 有搜索框input筛选的树形菜单

星星chok

已于 2024-07-26 16:21:34 修改

阅读量1.1k

点赞数

文章标签： vue.js 前端 javascript

于 2020-06-02 09:51:36 首次发布

本文链接：https://blog.csdn.net/qq_38985444/article/details/106489467

版权

本文详细介绍了如何使用Element UI库创建一个带有内置搜索框的树形菜单组件，通过输入关键字实现对菜单项的筛选过滤，提高用户体验。

摘要由CSDN通过智能技术生成

 //this.$refs.tree.getCheckedNodes()   //树选中的值
 //this.$refs.tree.getCheckedKeys()  //树选中的id
 //this.$refs.tree.setCurrentKey(id);//默认高亮
    default-expand-all  				--默认展开全部
    highlight-current   				--高亮
    :filter-node-method="filterNode" 	--筛选input
    :expand-on-click-node="false"   	--点击图标才展开
    node-key="id"      					--getCheckedKeys必须绑定id
    :props="{          					-- 格式化可写在标签内
        label: 'name',
        value:'id',
    }"

<div class="tree-box">
    <span class="tree-title">标题</span>
    <el-input
        placeholder="请输入"
        v-model="treeList.filterText"
        suffix-search="el-icon-date">
    </el-input>
    <el-tree
        class="filter-tree"
        :data="treeList.treeData"
        :props="treeList.treeProps"
        default-expand-all
        :expand-on-click-node="false"
        highlight-current
        :filter-node-method="filterNode"
        ref="tree"
        @node-click="treeClick">
    </el-tree>
</div>

 <script>
        data() {
            return {
                treeList:{
                    filterText:"",//树形菜单搜索框
                    treeData:[],//树形菜单
                    treeProps: {         //树形菜单格式化
                        label: 'name',
                        value:'id',
                    }
                },
            }
        }
        //this.$refs.tree.getCheckedNodes()   //树选中的值
        //this.$refs.tree.getCheckedKeys()  //树选中的id
        //this.$refs.personTree.setCurrentKey(id);//默认高亮
        //树点击
        treeClick(data){
            console.log(data)
        },
        // 过滤树表单内容
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        watch: {
            // 监听树的搜索框
            'treeList.filterText'(val) {
                this.$refs.tree.filter(val);
            }
        },
    </script>

 <style>
	.tree-box{
       width: 268px;
       height: 310px;
       border: solid 1px #e9e9e9;
       border-radius: 4px;
       margin-right: 20px;
       float: left;
       .tree-title{
           display: block;
           color: #666666;
           font-size: 14px;
           background-color: #f1f2f4;
           border-radius: 4px 4px 0 0;
           text-indent: 18px;
           width: 100%;
           height: 40px;
           line-height: 40px;
       }
       .el-input{
           display: inherit;
           margin: 10px auto;
           width: 90%;
       }
       .el-tree{
           margin: 10px auto;
           height: 200px;
           width: 90%;
           /*background: #000;*/
           overflow: auto;
       }
   }
</style>