1、效果图

2、数据库设计

通过parent_id联系起来,实现层级数据,第一层的parent_id是0,第二层以上的通过parent_id来代表其属于哪一个结点。

sort用于排序,也可视为代表当前结点是第几层。

3、前端代码

<div class="right-part-catalogue">
    <input placeholder="输入关键字进行搜索" v-model="filterText" class="input_query" prefix-icon="el-icon-search">

    <el-tree
        class="filter-tree"
        :data="data"
        :props="defaultProps"
        :filter-node-method="filterNode"
        @node-click="handleNodeClick"
        ref="tree">
    </el-tree>
</div>

input中的v-model绑定的是filterText,并且在watch中进行监听,只要filterText发生变化就会触发 el-tree绑定的filter方法"filterNode",

:data:tree绑定的数据。

:props="defaultProps":配置结点信息,id、label(文本展示)、child(其子节点)。tree的每个结点主要属性id,label,children(就是该结点下的子节点),通过defaultProps来设置结点主要属性对应后端传回来数据的属性。

:filter-node-method="filterNode":对应watch监听函数。

 @node-click="handleNodeClick":结点被点击所触发的事件。

ref="tree":标识这个树的名称,然后可以通过$ref.tree拿到数据的所有属性和方法

注意:data.name.indexOf(value):name对应label配置的字段。

data() {
    return {
        filterText: '',
        data:[{}],
        defaultProps: {
            id: 'id',//标识每个结点
            label: 'name',//结点的文本展示
            children: 'reviewGuidelines'//结点的子节点
        }
    }
},
watch: {
    filterText(val) {
        this.$refs.tree.filter(val)
    }
},
methods: {
    filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
    },
    load_data(){
        const _this = this;
        // 通过axios发起请求,后端如果有登录验证注解,就加上headers信息
        this.$axios.get("review-guidelines/look",{
            headers:{
                "Authorization": localStorage.getItem("token")
            }}).then((res) => {
                _this.data = res.data.data
        })
    }
},
created() {
    this.load_data()
}

后端返回树形层级数据处理可查看

Logo

前往低代码交流专区

更多推荐