element ui 树形控件的使用

最新推荐文章于 2024-06-12 09:14:01 发布

caimaomaocai

最新推荐文章于 2024-06-12 09:14:01 发布

阅读量7k

点赞数 2

本文链接：https://blog.csdn.net/caimaomaocai/article/details/83184965

版权

本文介绍如何在Vue项目中实现一个多级菜单树，通过点击菜单动态刷新右侧列表数据。使用Element UI的Tree组件展示菜单，点击菜单项时发送请求到后台，更新列表数据，实现数据的实时加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目需求，需要做一个多级菜单树，菜单的数据是后台调回来的数据。。。

设计图是左边是菜单树，右边是点击菜单返回来的数据列表。。

点击左边的菜单，右边的列表数据就做相应的刷新。。

我的实现思路是这样的。。

1.首先先在data里定义一个数组，用来存放从后台返回来的数据。

2、点击菜单的时候获取相应的id，发送给后台。后台给我返回相应的数据，我再赋值给事先定义好的数据列表中...这样就实现了点击树形菜单时，右边的列表数据动态刷新

关键代码如下

左边树形控件

         <el-tree 
             :data="data" 
             node-key="id"
             :props="defaultProps" 
             default-expand-all
             highlight-current
             @node-click="handleNodeClick"
             >
          </el-tree>

右边列表

<el-table
                    @selection-change="handleTableSelectionChange"
                    :data="tableData"
                    stripe
                    size="small"
                    style="width: 100%">

vue中的数据

export default {
    name:"DeviceManage",
    data() {
      return {
        data: [], //树形菜单绑定的数据
        tableData:[] //右边列表绑定的数据
      }
   }
}

方法

handleNodeClick (data) {
           var app = this;
           app.id = JSON.stringify(data.id);
           app.$ajax.get("/admin/system/device/pageByFactory",{
              params:{
                  id:data.id, //把当前点击的id值传给后台，后台返回相应的数据
                  name: app.searchParams.name,
                  page: app.searchParams.page,
                  pageSize: app.searchParams.pageSize
              }
            }).then(res => {
             app.tableData = res.data.data
           }).catch({

           })
       },

（完)