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+'®ionId='+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 getOrganizationInfoByRegionId(OrganizationInfo organizationInfo) {
        //1.查询到所有该地区下的组织信息
        List organizationInfos = organizationInfoMapper.getOrganizationInfoByRegionId(organizationInfo);
        return organizationInfos;
    }