vue中el-table多层级嵌套的具体实现

 更新时间:2023年10月26日 15:03:37   作者:CV猿码人  
本文主要介绍了vue中el-table多层级嵌套的具体实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

只要你后端可以查到数据这个层级可以无限嵌套 

这里用了懒加载,每次点击的时候将当前点击的父级id作为查询条件,向后端发送请求,来获取他子级的数据,并不是将所有数据查出来拼接返回的。

前端代码

 <el-table
            :data="dataList"
            style="width: 100%"
            row-key="id"
            border
            :lazy="true"
            :load="load"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column
                            prop="name"
                            label="组织姓名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="natures"
                            label="组织性质"
                            width="180">
                    </el-table-column>

                    <el-table-column
                            prop="dateEstablishment"
                            label="成立时间">
                    </el-table-column>
                    <el-table-column
                            prop="leader"
                            label="组织领导">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址">
                    </el-table-column>
</el-table>
        data() {
            return {
                inputForm: {
                    id: '',
                    parentId: '',
                    name: '',
                    sort: '',
                    natures: '',
                    area: '',
                    longitude: '',
                    latitude: '',
                    dateEstablishment: '',
                    leader: '',
                    address: '',
                    regionId:'',
                    regionParentIds:''
                },
                dataList: [],
                loading: false,
           
            }
        },
created() {
            // this.refreshList()
            this.initList()
        },
        methods: {
    
            //获取右边树表
            initList() {
                this.inputForm.parentId=0

                this.get(/organizationInfo/getOrganizationInfoByRegionId?parentId='+this.inputForm.parentId+'&regionId='+this.inputForm.regionId).then((res) => {
                    this.dataList = res
                })

            },
            load(row, treeNode, resolve) {
                this.get(ctx + '/basicinfo/organizationInfo/getOrganizationInfoByRegionId?parent.id=' + row.id).then((res) => {
                    resolve(res)
                })
            },
}

后端代码

    /**
     * 通过地区id查询当前Parent的数据
     *
     * @param regionId
     * @return
     */
    @Override
    public List<OrganizationInfo> getOrganizationInfoByRegionId(OrganizationInfo organizationInfo) {
        //1.查询到所有该地区下的组织信息
        List<OrganizationInfo> organizationInfos = organizationInfoMapper.getOrganizationInfoByRegionId(organizationInfo);
        return organizationInfos;
    }

到此这篇关于vue中el-table 多层级嵌套的具体实现的文章就介绍到这了,更多相关vue el-table 多层级嵌套内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue.js 2.0学习教程之从基础到组件详解

    Vue.js 2.0学习教程之从基础到组件详解

    这篇文章主要介绍了Vue.js 2.0从基础到组件的相关资料,文中介绍的非常详细,对大家学习或者使用vue.js具有一定的参考价值,需要的朋友可以参考学习,下面来一起看看吧。
    2017-04-04
  • vue-cli中的webpack的config配置全过程

    vue-cli中的webpack的config配置全过程

    文章详细介绍了Vue CLI中webpack的配置文件,包括`dev.env.js`和`prod.env.js`的内容,以及它们是如何通过`webpack-merge`模块进行合并的,文章还解释了这些配置文件中各个参数的作用,如`assetsSubDirectory`、`assetsPublicPath`、`proxyTable`等
    2026-02-02
  • vue3如何通过provide和inject实现多层级组件通信

    vue3如何通过provide和inject实现多层级组件通信

    这篇文章主要介绍了vue3如何通过provide和inject实现多层级组件通信,本文通过实例代码给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-11-11
  • VUE实现Studio管理后台之鼠标拖放改变窗口大小

    VUE实现Studio管理后台之鼠标拖放改变窗口大小

    这篇文章主要介绍了VUE实现Studio管理后台之鼠标拖放改变窗口大小 的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的工作或学习具有一定的参考价值,需要的朋友可以参考下
    2020-03-03
  • vue中created、watch和computed的执行顺序详解

    vue中created、watch和computed的执行顺序详解

    由于vue的双向数据绑定,自动更新数据的机制,在数据变化后,对此数据依赖 的所有数据,watch事件都会被更新、触发,下面这篇文章主要给大家介绍了关于vue中created、watch和computed的执行顺序,需要的朋友可以参考下
    2022-11-11
  • vue路由警告:Duplicate named routes definition问题

    vue路由警告:Duplicate named routes definition问题

    这篇文章主要介绍了vue路由警告:Duplicate named routes definition问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue3中的watch()的用法和具体作用

    vue3中的watch()的用法和具体作用

    这篇文章主要介绍了vue3中的watch()的用法和具体作用,通过合理和熟练使用watch()方法,开发者可以更加高效地完成前端开发工作,需要的朋友可以参考下
    2023-04-04
  • Vue如何实现数据的上移和下移

    Vue如何实现数据的上移和下移

    这篇文章主要介绍了Vue如何实现数据的上移和下移问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • Vue3源码解读computed和watch

    Vue3源码解读computed和watch

    这篇文章主要为大家介绍了Vue3中的computed和watch源码解读分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • Vue3中watch监听器及源码学习

    Vue3中watch监听器及源码学习

    本文主要介绍了Vue3中watch监听器及源码学习,Watch侦听器在Vue3中特性进行了一些改变和优化,下面来详解的介绍一下基本使用,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01

最新评论