【前后端的那些事】treeSelect树形结构数据展示

文章目录

    • tree-selector
      • 1. 新增表单组件
      • 2. 在父组件中引用
      • 3. 父组件添加新增按钮
      • 4. 树形组件
        • 4.1 前端代码
        • 4.2 后端代码

前言:最近写项目,发现了一些很有意思的功能,想写文章,录视频把这些内容记录下。但这些功能太零碎,如果为每个功能都单独搭建一个项目,这明显不合适。于是我想,就搭建一个项目,把那些我想将的小功能全部整合到一起。实现 搭一次环境,处处使用。

本文主要实现一下两个功能

  1. 新增表单, 更新表单组件编写
  2. treeSelect树形结构编写

环境搭建
文章链接

已录制视频
视频链接

tree-selector

这个功能是table-tree功能的附属产品。是为了能在新增表单中,更方便选择上级节点所开发的功能。因此,我们得先把新增表单组件开发出来

新增、修改逻辑
【前后端的那些事】treeSelect树形结构数据展示_第1张图片

tree形组件

【前后端的那些事】treeSelect树形结构数据展示_第2张图片

1. 新增表单组件

/src/views/welcome/treeAddOrUpdate.vue

<script setup lang="ts">
import { UnitEntity } from "@/api/tree";
import { ref, reactive } from "vue";
const dialogVisible = ref(false);

let form = reactive(new UnitEntity());
const title = ref("新增表单");

// 定义init方法, 让父组件调用
const init = data => {
  console.log(data);
  if (data) {
    form = data;
    title.value = "编辑表单";
  } else {
    title.value = "新增表单";
  }
  dialogVisible.value = true;
};

// 暴露方法
defineExpose({ init });

// 提交表单
const submit = () => {
  console.log(form);
};
</script>

<template>
  <el-dialog v-model="dialogVisible" :title="title">
    <el-form :model="form">
      <el-form-item label="单元">
        <el-input v-model="form.unit" />
      </el-form-item>
      <el-form-item label="父id">
        <el-input v-model="form.pid" />
      </el-form-item>
    </el-form>
    <el-button @click="submit">提交</el-button>
  </el-dialog>
</template>

<style lang="scss" scoped></style>

2. 在父组件中引用

/src/views/welcome/index.vue

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import TreeAddOrUpdate from "./treeAddOrUpdate.vue";

const dialogVisible = ref(false);

// 引用子组件
const treeAddOrUpdateRef = ref();

// ...
</script>

<template>
  <!--ref引用组件-->
  <tree-add-or-update v-if="dialogVisible" ref="treeAddOrUpdateRef" />
</template>

3. 父组件添加新增按钮

/src/views/welcome/index.vue

<script setup lang="ts">
// 新增/修改 都可以使用该方法
const addOrUpdate = data => {
  console.log(data);
  dialogVisible.value = true;
  // nextTick保证treeAddOrUpdateRef能够引用到子组件
  nextTick(() => {
    // 调用子组件暴露的init方法, 设置数据
    treeAddOrUpdateRef.value.init(data);
  });
};
</script>

<template>
	<el-button type="primary" @click="addOrUpdate">新增</el-button>
</template>

完成以上步骤,我们就可以点击新增表单,但这个界面对于用户来说其实并不美好。谁知道父id是什么?因此我们采用tree-select的形式来提高界面的可使用性

4. 树形组件

【前后端的那些事】treeSelect树形结构数据展示_第3张图片

我们使用的是element plus的TreeSelect组件,具体文档如下:[TreeSelect 树形选择 | Element Plus (element-plus.org)]()

4.1 前端代码
  • /src/api/tree.ts
export class LabelVo {
id: Number;
label: String;
value: String;
children: Array<LabelVo>;
}

/** 获取全部的treeLabel */
export const getLabelTree = () => {
return http.request<R<Array<LabelVo>>>(
  "get",
  baseUrlApi("unit/listTreeSelect")
);
};

/** 根据id查询节点 */
export const getNodeById = (id: Number) => {
return http.request<R<LabelVo>>("get", baseUrlApi(`unit/listNode?id=${id}`));
};
  • /src/views/welcome/treeAddOrUpdate.vue
<template>
<el-tree-select
          v-model="value"
          :data="data"
          check-strictly
          show-checkbox
          @check-change="handleCheckChange"
          style="width: 240px"
        />
</template>

<script>
// 定义init方法, 让父组件调用
const init = data => {
  console.log(data);
  if (data) {
    form = data;
    title.value = "编辑表单";
    // 查询上级节点数据(根据id返回{value, label, id})
    getNodeById(form.pid).then(res => {
      if (res.code === 0) {
        value.value = res.data.value;
      }
    });
  } else {
    title.value = "新增表单";
  }
  console.log(form);
  dialogVisible.value = true;
};

const value = ref();
const data = ref<Array<LabelVo>>();

const handleCheckChange = (data: LabelVo, checked, indeterminate) => {
  console.log(data);
  console.log(checked);
  if (checked) {
    form.pid = data.id;
  }
};
</script>

tip: init方法改动

4.2 后端代码
  • 定义实体类
package com.fgbg.demo.vo;

import lombok.Data;

import java.util.List;

@Data
public class LabelVo {
    private String label;
    private String value;
    private Integer id;
    private Integer pid;
    private List<LabelVo> children;
}

  • 返回tree-selector展示所需数据

        @RequestMapping("/listTreeSelect")
        public R listTreeSelect() {
            List<TbUnit> tbUnitList = unitService.list();
            List<LabelVo> list = tbUnitList.stream().map(e -> {
                LabelVo vo = new LabelVo();
                vo.setValue(e.getUnit());
                vo.setLabel(e.getUnit());
                vo.setId(e.getId());
                vo.setPid(e.getPid());
                return vo;
            }).collect(Collectors.toList());
            // TbUnit -> LabelVo
            // 建立map映射(id->index)
            HashMap<Integer, Integer> map = new HashMap<>();
            for (int index = 0; index < list.size(); index++) {
                Integer id = list.get(index).getId();
                map.put(id, index);
            }
            // ...
            for (int i = 0; i < list.size(); i++) {
                LabelVo node = list.get(i);
                Integer pid = node.getPid();
                // 有父亲
                if (pid != null) {
                    // 找到pid的父亲, 并把当前节点(node)添加到父亲节点的children里面
                    Integer indexParent = map.get(pid);
                    // 获取父亲节点
                    LabelVo parent = list.get(indexParent);
                    if (parent.getChildren() == null) {
                        parent.setChildren(new ArrayList<>());
                    }
                    // 向父亲节点的children字段添加当前node
                    parent.getChildren().add(node);
                }
            }
            // 过滤出一级节点
            List<LabelVo> ans = list.stream().filter(e -> e.getPid() == null).collect(Collectors.toList());
            return R.ok().put("data", ans);
        }
    
    
  • 根据id查询数据

        // 根据id查询节点数据{value id label}
        @RequestMapping("/listNode")
        public R listNode(@RequestParam Integer id) {
            TbUnit unit = unitService.getById(id);
            LabelVo labelVo = new LabelVo();
            labelVo.setLabel(unit.getUnit());
            labelVo.setValue(unit.getUnit());
            labelVo.setId(unit.getId());
            return R.ok().put("data", labelVo);
        }
    

你可能感兴趣的:(javascript,开发语言,springboot,element-plus)