网站建设佰首选金手指三,一流的成都 网站建设,商务推广网站,优秀网页设计作品文字分析文章目录 tree-selector1. 新增表单组件2. 在父组件中引用3. 父组件添加新增按钮4. 树形组件4.1 前端代码4.2 后端代码 前言#xff1a;最近写项目#xff0c;发现了一些很有意思的功能#xff0c;想写文章#xff0c;录视频把这些内容记录下。但这些功能太零碎#xff0c… 文章目录 tree-selector1. 新增表单组件2. 在父组件中引用3. 父组件添加新增按钮4. 树形组件4.1 前端代码4.2 后端代码 前言最近写项目发现了一些很有意思的功能想写文章录视频把这些内容记录下。但这些功能太零碎如果为每个功能都单独搭建一个项目这明显不合适。于是我想就搭建一个项目把那些我想将的小功能全部整合到一起。实现
搭一次环境处处使用。 本文主要实现一下两个功能
新增表单, 更新表单组件编写treeSelect树形结构编写
环境搭建 文章链接
已录制视频 视频链接
tree-selector
这个功能是table-tree功能的附属产品。是为了能在新增表单中更方便选择上级节点所开发的功能。因此我们得先把新增表单组件开发出来
新增、修改逻辑
tree形组件 1. 新增表单组件
/src/views/welcome/treeAddOrUpdate.vue
script setup langts
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);
};
/scripttemplateel-dialog v-modeldialogVisible :titletitleel-form :modelformel-form-item label单元el-input v-modelform.unit //el-form-itemel-form-item label父idel-input v-modelform.pid //el-form-item/el-formel-button clicksubmit提交/el-button/el-dialog
/templatestyle langscss scoped/style2. 在父组件中引用
/src/views/welcome/index.vue
script setup langts
import { ref, onMounted, nextTick } from vue;
import TreeAddOrUpdate from ./treeAddOrUpdate.vue;const dialogVisible ref(false);// 引用子组件
const treeAddOrUpdateRef ref();// ...
/scripttemplate!--ref引用组件--tree-add-or-update v-ifdialogVisible reftreeAddOrUpdateRef /
/template3. 父组件添加新增按钮
/src/views/welcome/index.vue
script setup langts
// 新增/修改 都可以使用该方法
const addOrUpdate data {console.log(data);dialogVisible.value true;// nextTick保证treeAddOrUpdateRef能够引用到子组件nextTick(() {// 调用子组件暴露的init方法, 设置数据treeAddOrUpdateRef.value.init(data);});
};
/scripttemplateel-button typeprimary clickaddOrUpdate新增/el-button
/template完成以上步骤我们就可以点击新增表单但这个界面对于用户来说其实并不美好。谁知道父id是什么因此我们采用tree-select的形式来提高界面的可使用性
4. 树形组件 我们使用的是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: ArrayLabelVo;
}/** 获取全部的treeLabel */
export const getLabelTree () {
return http.requestRArrayLabelVo(get,baseUrlApi(unit/listTreeSelect)
);
};/** 根据id查询节点 */
export const getNodeById (id: Number) {
return http.requestRLabelVo(get, baseUrlApi(unit/listNode?id${id}));
};/src/views/welcome/treeAddOrUpdate.vue
template
el-tree-selectv-modelvalue:datadatacheck-strictlyshow-checkboxcheck-changehandleCheckChangestylewidth: 240px/
/templatescript
// 定义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 refArrayLabelVo();const handleCheckChange (data: LabelVo, checked, indeterminate) {console.log(data);console.log(checked);if (checked) {form.pid data.id;}
};
/scripttip: 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 ListLabelVo children;
} 返回tree-selector展示所需数据 RequestMapping(/listTreeSelect)public R listTreeSelect() {ListTbUnit tbUnitList unitService.list();ListLabelVo 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)HashMapInteger, 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字段添加当前nodeparent.getChildren().add(node);}}// 过滤出一级节点ListLabelVo 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);}
