vue中使用el-tree渲染树形层级数据

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()
}

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