項目需要，可選擇的下拉樹，由於數據可能過多的原因，為了避免不必要的浪費，所以呢，用到了懶加載的模式。
一、前段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);
}