前端显示左树右表

 结构：

先定义一个容器，容器高度自定义。

左侧显示添加<el-aside>

右侧显示添加<el-main>

 左侧树结构：

<!--左侧菜单树-->
        <el-aside
        style="padding:10px 0px 0px 0px ;background:#fff;border-right:1px solid #dfe6ec" width="230px">
            <!--树结构-->
            <el-tree
            style="font-size: 14px"
            ref="leftTree"
            :data="deptList"
            node-key="id"
            :props="defaultProps"
            default-expand-all
            empty-text="暂无数据"
            :show-checkbox="false"
            :highlight-current="true"
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
            >
                <div class="custom-tree-node" slot-scope="{ node, data }">
                    <div>
                        <span v-if="data.children.length == 0">
                            <i class="el-icon-document"></i>
                        </span>
                        <!--绑定的这个方法，就是展开后显示-，没展开显示+  -->
                        <span v-else @click="openBtn(data)">
                            <!--判断当前节点是否是展开的--> <!--icon-class=添加自定义的图标的名字-->
                            <svg-icon v-if="data.open" icon-class="添加+" />
                            <svg-icon v-else icon-class="删除-" />
                        </span>
                        <!--显示的文本信息 选择完成之后数据的回显-->
                        <span style="margin-left: 3px">{{ node.label }}</span>
                    </div>
                </div>
            </el-tree>
        </el-aside>

改变的只有树属性中的：@node-click="handleNodeClick"

给点击后执行的函数赋值。就是赋值之后，在查询列表时，添加进一个查询条件。

//树结构选中的方法
        handleNodeClick(data){
            //把ID进行赋值
            this.departmentId = data.id;
            //查询用户信息
            this.search(this.departmentId);
        },

 查询列表是也要添加这个条件

 

返回值中一定要定义好：