左侧树的配置,主要多了数据来源、左侧标题、表名或接口地址、关联字段的配置,如下所示:

1. 数据来源:数据库表

  • 左侧标题:为左侧树显示的名称
  • 表名:左侧树对应的表
  • 关联字段:为主表外键,通过gen_test_goods的category_id字段,关联gen_test_goods_category的id字段

表结构如下:

CREATE TABLE gen_test_goods_category
(
    id          bigint NOT NULL AUTO_INCREMENT COMMENT 'ID',
    name        varchar(100) COMMENT '名称',
    pid         bigint COMMENT '上级ID',
    create_time datetime COMMENT '创建时间',
    PRIMARY KEY (id)
)ENGINE = InnoDB DEFAULT CHARSET = utf8mb4 COMMENT ='商品分类';

CREATE TABLE gen_test_goods
(
    id          bigint NOT NULL AUTO_INCREMENT COMMENT 'ID',
    name        varchar(100) COMMENT '名称',
    intro       varchar(5000) COMMENT '介绍',
    category_id bigint COMMENT '分类ID',
    create_time datetime COMMENT '创建时间',
    PRIMARY KEY (id)
)ENGINE = InnoDB DEFAULT CHARSET = utf8mb4 COMMENT ='商品管理';

生成代码后,效果图如下,还会生成左侧树的CRUD功能,如下所示:


2. 数据来源:数据接口

  • 左侧标题:为左侧树显示的名称
  • 关联字段:为主表外键
  • 接口地址:接口地址,返回的数据格式如下,字段名必须跟下面的一致:
{
  "code": 0,
  "msg": "success",
  "data": [
    {
      "id": 1,
      "pid": null,
      "name": "电器",
      "hasChild": true
    },
    {
      "id": 2,
      "pid": null,
      "name": "服装",
      "hasChild": false
    },
    {
      "id": 3,
      "pid": 1,
      "name": "手机",
      "hasChild": false
    },
    {
      "id": 4,
      "pid": 1,
      "name": "电脑",
      "hasChild": false
    }
  ]
}

生成代码后,效果图如下,如下所示: