[PrimeVue] 自定义分类树(TreeTable)-分类树构建_primevue tree 缩进

构建自定义分类树,本篇以构建区域分类树(area)为例:

一.area数据库表:

以下列举主要字段:主键id;区域唯一编码code; 区域名称name; 级别grade; 上级区域编码up_code(无上级填'0'); 短代码shorcode; 区域全名fullname.

二.前端样例

1.展示部分页面(分类树结构)

 2.前端PrimeVue代码(TreeTable部分)

     <div class="card" v-if="isreloaddata">
      <TreeTable :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey" @nodeSelect="onNodeSelect"
                 v-model:expandedKeys="expandedKeys" :filters="filters" filterMode="lenient"
                 :paginator="true"
                 class="p-datatable-customers" :rows="10"
                 paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
                 :rowsPerPageOptions="[10,25,50]">
 
        <Column field="code" header="区域编码" :expander="true">
          <template #filter>
            <InputText type="text" v-model="filters['code']" class="p-column-filter" placeholder="Filter by code"/>
          </template>
        </Column>
 
        <Column field="name" header="区域名称">
          <template #filter>
            <InputText type="text" v-model="filters['name']" class="p-column-filter" placeholder="Filter by name"/>
          </template>
        </Column>
 
        <Column field="fullname" header="区域全名">
          <template #filter>
            <InputText type="text" v-model="filters['fullname']" class="p-column-filter"
                       placeholder="Filter by fullname"/>
          </template>
        </Column>
 
        <Column field="remark" header="备注">
          <template #filter>
            <InputText type="text" v-model="filters['remark']" class="p-column-filter"
                       placeholder="Filter by remark"/>
          </template>
        </Column>
      </TreeTable>
    </div>

三.实体类定义

1.实体类(部分字段)

@Data
@TableName("t_area")
public class Area{
    
    @TableId(value = "id",type = IdType.AUTO)
    private Long id;           
    private String code;       
    private String name;       
    private Integer grade;     
    private String upCode;     
    private String shorcode;   
    private String fullname;   
    private String remark;     
    
}

2.VO类(部分字段)

@Data
public class AreaVO {
    
    private Long id;
    private String code;       
    private String name;       
    private String upCode;     
    private Integer grade;     
    private String fullname;   
    private String shorcode;   
    private String remark;
 
    private String key;
    // 详情对象
    private AreaDetail data;
    // 子对象
    private List<AreaVO> children =new ArrayList<>();
    public void add(AreaVO nodeVo){
        children.add(nodeVo);
    }
}

3.详情对象(前台需要展示的内容)

@Data
public class AreaDetail {
 
    private String code;       
    private String name;       
    private String fullname;   
    private String remark;
}

四.后端代码

后端controller层,service层和dao层,使用Mybatis-puls.

1.后端层次

 2.controller层(获取分类树列表部分,简化判断)

    /**
     * 获取区域档案列表的控制器方法
     * @return 区域档案列表/0:查询失败
     */
    @PostMapping("get_list")
    public ResponseVo getAreaList(){
        List<AreaVO> areaList = areaService.getAreaList();
 
        return ResponseVo.ok(areaList);
    }

2.service层

    /**
     * 获取区域档案列表的业务逻辑
     * @return 区域档案列表
     */
    public List<AreaVO> getAreaList() {
        // 调用Mapper层原始数据查询
        List<AreaVO> nodeVoList = areaMapper.selectList(null).stream()
                // 过滤掉 code == upCode 的数据
                .filter(area -> !area.getCode().equals(area.getUpCode()))
                .map(areaInfo -> {
                    AreaVO nodeVo = new AreaVO();
                    // 同名属性赋值
                    BeanUtils.copyProperties(areaInfo, nodeVo);
                    nodeVo.setKey(areaInfo.getCode());
                    AreaDetail data = new AreaDetail();
                    BeanUtils.copyProperties(nodeVo, data);
                    nodeVo.setData(data);
                    return nodeVo;
                }).collect(Collectors.toList());
 
        return createTree(nodeVoList, "0");
    }

3.构建分类树的方法

    /**
     * 构建区域档案树的方法
     * @param nodeVoList 区域档案集合
     * @param root 构建根节点
     * @return 构建完成的区域档案集合
     */
    private List<AreaVO> createTree(List<AreaVO> nodeVoList, String root) {
 
        List<AreaVO> areaVOList = new ArrayList<>();
        for (AreaVO areaVO : nodeVoList) {
            if (areaVO.getUpCode().equals(root)) {
                areaVO.setChildren(createTree(nodeVoList, areaVO.getCode()));
                areaVOList.add(areaVO);
            }
        }
        return areaVOList;
    }

4.dao层

/**
 * 区域 dao 层
 */
@Mapper
public interface AreaMapper extends BaseMapper<Area>{
 
}

5.请求及返回样例

测试发起请求:

 请求地址:http://127.0.0.1:8080/easycharge/area/get_list

返回格式:

{
    "flag": true,
    "code": 200,
    "data": [
        {
            "key": "1",
            "data": {
                "code": "1",
                "name": "山东",
                "fullname": "山东",
                "remark": ""
            },
            "id": 1,
            "children": [
                {
                    "key": "1.1",
                    "data": {
                        "code": "1.1",
                        "name": "济南",
                        "fullname": "山东-济南",
                        "remark": ""
                    },
                    "id": 2,
                    "children": [
                        {
                            "key": "1.1.1",
                            "data": {
                                "code": "1.1.1",
                                "name": "槐荫",
                                "fullname": "山东-济南-槐荫",
                                "remark": ""
                            },
                            "id": 3,
                            "children": [
                                {
                                    "key": "1.1.1.1",
                                    "data": {
                                        "code": "1.1.1.1",
                                        "name": "龙湖",
                                        "fullname": "山东-济南-槐荫-龙湖",
                                        "remark": ""
                                    },
                                    "id": 4,
                                    "children": []
                                }
                            ]
                        }
                    ]
                },
                {
                    "key": "1.2",
                    "data": {
                        "code": "1.2",
                        "name": "聊城",
                        "fullname": "山东-聊城",
                        "remark": ""
                    },
                    "id": 5,
                    "children": [
                        {
                            "key": "1.2.1",
                            "data": {
                                "code": "1.2.1",
                                "name": "东昌府",
                                "fullname": "山东-聊城-东昌府",
                                "remark": ""
                            },
                            "id": 6,
                            "children": []
                        }
                    ]
                }
            ]
        }
    ]
}

下期更新分类树的修改:分类树节点的修改会关联下级的修改,也需要考虑现有节点条件.