Vue框架Element中el-tree(树)组件的使用

el-tree组件的使用

  • 前端代码
  • 后端代码
    • 控制层
    • 业务层
    • DAO

前端代码

el-tree的组件代码:

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
// 树——存放数据
data:[],
// 定义defaultProps
defaultProps:{
    children: 'childList',
    label: 'paramType' // 这里的名字要和你封装的数据中的节点的名字一样
},
//树结构点击事件
handleNodeClick(data, node) {
    this.loading = true;
    //组织机构层级
    if (node.level === 1) {
        var queryCondition = {
            pageNum: this.currentPage,
            pageSize: this.currentPageSize,
            paramType: data.paramType
        };
        handleNodeClick(queryCondition).then(resp => {
            if (resp && resp.responseHead.code === "0") {
                this.recordNumber = resp.body.total;
                this.items = resp.body.list;
                this.loading = false;
            }
        });
    }
},

后端代码

控制层

/**
 * 树结构点击事件
 * @param commonRequest
 * @return
 */
@PostMapping("/handleNodeClick")
public CommonResponse<PageInfo<SystemParamDataListVO>> handleNodeClick(@RequestBody CommonRequest<SystemParamQueryConditionVO> commonRequest){
    SystemParamDTO dto = new SystemParamDTO();
    BeanUtils.copyProperties(commonRequest.getBody(),dto);
    PageInfo<SystemParamDTO> dtoPageInfo = systemParamService.handleNodeClick(dto);
    List<SystemParamDTO> dtos = dtoPageInfo.getList();
    List<SystemParamDataListVO> vos = new ArrayList<SystemParamDataListVO>();
    for (SystemParamDTO systemParamDTO:dtos){
        SystemParamDataListVO vo = new SystemParamDataListVO();
        BeanUtils.copyProperties(systemParamDTO,vo);
        vos.add(vo);
    }
    PageInfo<SystemParamDataListVO> pageInfo = new PageInfo<SystemParamDataListVO>();
    BeanUtils.copyProperties(dtoPageInfo,pageInfo);
    pageInfo.setList(vos);
    return CommonResponseUtils.makeSuccessCommonResponse(pageInfo,"0",null,null,null);

}

业务层

public PageInfo<SystemParamDTO> handleNodeClick(SystemParamDTO systemParamDTO){
    Condition condition = new Condition(SystemParam.class);
    Example.Criteria criteria = condition.createCriteria();
    criteria.andEqualTo("paramType", systemParamDTO.getParamType());
    PageHelper.startPage(systemParamDTO.getPageNum(), systemParamDTO.getPageSize());
    List<SystemParam> params = systemParamDao.selectByExample(condition);
    PageInfo<SystemParam> systemParamPageInfo = new PageInfo<SystemParam>(params);
    List<SystemParamDTO> dtos = new ArrayList<SystemParamDTO>();
    for (SystemParam systemParam:params){
        SystemParamDTO dto = new SystemParamDTO();
        BeanUtils.copyProperties(systemParam,dto);
        dtos.add(dto);
    }
    PageInfo<SystemParamDTO> systemParamDTOPageInfo = new PageInfo<SystemParamDTO>();
    BeanUtils.copyProperties(systemParamPageInfo, systemParamDTOPageInfo);
    systemParamDTOPageInfo.setList(dtos);
    return systemParamDTOPageInfo;
}

DAO

引用了通用mapper

你可能感兴趣的:(Vue框架Element中el-tree(树)组件的使用)