只要你后端可以查到数据这个层级可以无限嵌套
这里用了懒加载,每次点击的时候将当前点击的父级id作为查询条件,向后端发送请求,来获取他子级的数据,并不是将所有数据查出来拼接返回的。
前端代码
<el-table:data="dataList"style="width: 100%"row-key="id"border:lazy="true":load="load":tree-props="{children: 'children', hasChildren: 'hasChildren'}"><el-table-columnprop="name"label="组织姓名"width="180"></el-table-column><el-table-columnprop="natures"label="组织性质"width="180"></el-table-column><el-table-columnprop="dateEstablishment"label="成立时间"></el-table-column><el-table-columnprop="leader"label="组织领导"></el-table-column><el-table-columnprop="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=0this.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*/@Overridepublic List<OrganizationInfo> getOrganizationInfoByRegionId(OrganizationInfo organizationInfo) {//1.查询到所有该地区下的组织信息List<OrganizationInfo> organizationInfos = organizationInfoMapper.getOrganizationInfoByRegionId(organizationInfo);return organizationInfos;}