vue中el-table多层级嵌套的具体实现
作者：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+'®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<OrganizationInfo> getOrganizationInfoByRegionId(OrganizationInfo organizationInfo) {
//1.查询到所有该地区下的组织信息
List<OrganizationInfo> organizationInfos = organizationInfoMapper.getOrganizationInfoByRegionId(organizationInfo);
return organizationInfos;
}
到此这篇关于vue中el-table 多层级嵌套的具体实现的文章就介绍到这了,更多相关vue el-table 多层级嵌套内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！