前端vue3构建目录树

我是涛哥哥哟

已于 2024-07-26 09:13:03 修改

阅读量197

点赞数 6

文章标签：前端 java

于 2024-07-25 14:40:29 首次发布

本文链接：https://blog.csdn.net/m0_74742514/article/details/140689554

版权

1、java后端传入查询出所有符合条件的目录结果，不需要构建目录树，只需要传入一个list，这是一条数据的实体类 sjyflid相当于ID，sjyflfid相当于父ID 大家可以替换

    /**
     * 数据源ID
     */
    @Id(keyType = KeyType.Auto)
    private Integer sjyflid;

    /**
     * 数据源名称
     */
    @Column(value = "SJYFLMC")
    private String sjyflmc;

    /**
     * 数据源父ID
     */
    @Column(value = "SJYFLFID")
    private Integer sjyflfid;


    @Column(value = "PX")
    private Integer px;

    /**
     * 是否删除标识
     */
    @Column(value = "SFSC",isLogicDelete = true)
    private String sfsc;

2、前端进行构建目录树，此时返回的result为目录树的结构然后再引用el-tree组件数据填入就可以

function arrToTree(arr: Tree[]): Tree[] {
  const map: { [key: number]: Tree } = {};
  const result: Tree[] = [];
  for (const item of arr) {
    map[item.sjyflid] = item;
  }
  for (const item of arr) {
    if (item.sjyflfid != 0) {
      const parent = map[item.sjyflfid];
      if (parent) {
        (parent.children || (parent.children = [])).push(item);
      }
    } else {
      result.push(item);
    }
  }
  return result;
}