Springboot + Vue-treeselect 实现下拉树懒加载
项目需要，可选择的下拉树，由于数据可能过多的原因，为了避免不必要的浪费，所以呢，用到了懒加载的模式。
一、前段vue代码
1.下载依赖
npm install --save @riophae/vue-treeselect
2.引用进来
import Treeselect from '@riophae/vue-treeselect'
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
3.html
<Treeselect
v-model="orgCode" //双向绑定的值
:options="options" //初始化根节点数据
:multiple="true" //是否需要多选框
:load-options="loadOptions" //单击父节点，加载子节点数据
placeholder="选择上级模型"
/>
4.js
<script>
import Treeselect from '@riophae/vue-treeselect'
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
components: {Treeselect},
data() {
return {
//Treeselect绑定的下拉框选中的值，必须设置为null,不然会出现unknown的bug
orgCode:null,
//这里必须放"id"和label, id是唯一的值（我这边后台返回的是orgCode）
//label是要显示的名称,（后台返回的数据是organizationName）
options:[],
};
},
created() {
this.getTree()
},
methods: {
getTree() {
// 初始化下拉框数据 只加载根节点
let params = {'exportType': this.exportType,
'parentCode' : 0};
systemManage.getOrganizationTreeList(params).then(res =>{
let data = res.data;
for (var i = 0; i < data.length; i++) {
var parentInfo = {}
parentInfo.id = data[i].orgCode
parentInfo.label = data[i].organizationName
parentInfo.parentId = data[i].parentCode
// 主要就是为了添加 children = null
parentInfo.children = null
this.options.push(parentInfo)
}
})
},
// 加载子节点数据
loadOptions({ action, parentNode, callback }) {
console.log('parentNode',parentNode)
if (action === LOAD_CHILDREN_OPTIONS) {
// 加载点击节点的 子节点
let params = {'exportType': this.exportType,
'parentCode' : parentNode.id};
systemManage.getOrganizationTreeList(params).then(response =>{
var arr = []
let data = response.data;
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
const chiledModeInfo = {}
chiledModeInfo.id = data[i].orgCode
chiledModeInfo.label = data[i].organizationName
chiledModeInfo.parentCode = data[i].parentCode
// 主要就是为了添加 children = null
chiledModeInfo.children = null
arr.push(chiledModeInfo)
}
}
parentNode.children = arr
})
callback()
}
},
}
};
</script>
二、后段代码
1、Controller层
/**
* 获取机构树形结构
**/
@PostMapping("/getOrganizationTreeList")
@ResponseBody
public Result getOrganizationTreeList(@RequestBody DimensionEntity dimensionEntity) {
List<OrganizationBase> organizationBases = organizationBaseService.listWithTree(dimensionEntity.getParentCode());
return ok(organizationBases);
}
2、service
public interface OrganizationBaseService extends IService<OrganizationBase> {
List<OrganizationBase> listWithTree(String parendCode);
}
3、serviceImpl
@Component
public class OrganizationBaseServiceImpl extends ServiceImpl<OrganizationBaseMapper, OrganizationBase> implementsOrganizationBaseService {
@Resource
private OrganizationBaseMapper organizationBaseMapper;
@Override
public List<OrganizationBase> listWithTree(String parentCode) {
List<OrganizationBase> organizationBases = organizationBaseMapper.getList(parentCode);
// List<OrganizationBase> organizationBases = baseMapper.selectList(null);
return organizationBases.stream()
//查找到所有传过来的一级菜单
.filter(org -> org.getParentCode().equals(parentCode))
.map(org ->{
org.setChildren(getChildren(org,organizationBases));
return org;
}).collect(Collectors.toList());
}
/**
* 递归获取子菜单
*
*/
public List<OrganizationBase> getChildren(OrganizationBase o,List<OrganizationBase> all){
List<OrganizationBase> children = all.stream()
.filter(org -> org.getParentCode().equals(o.getOrgCode()) )
.map((org) ->{
org.setChildren(getChildren(org,all));
return org;
}).collect(Collectors.toList());
return children;
}
}
4、mapper
@Component
public interface OrganizationBaseMapper extends BaseMapper<OrganizationBase> {
@Select({"select * from system_organization_base where parent_code =#{parentCode}"})
List<OrganizationBase> getList(@Param("parentCode") String parentCode);
}
