java+vue3+el-tree實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)操作代碼
更新時(shí)間：2024年06月13日 10:09:36 作者：迪霸戈
基于springboot + vue3 elementPlus實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)數(shù)據(jù)的添加、刪除和頁(yè)面展示,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
基于springboot + vue3 elementPlus實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)數(shù)據(jù)的添加、刪除和頁(yè)面展示
效果如下
代碼如下，業(yè)務(wù)部分可以自行修改
java后臺(tái)代碼
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.daztk.mes.common.annotation.LogOperation;
import com.daztk.mes.common.utils.Result;
import com.daztk.mes.module.cad.dto.CadPartDto;
import com.daztk.mes.module.cad.entity.CadPart;
import com.daztk.mes.module.cad.entity.CadRelation;
import com.daztk.mes.module.cad.service.ICadPartService;
import com.daztk.mes.module.cad.service.ICadRelationService;
import org.apache.commons.collections4.CollectionUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.*;
import java.util.stream.Collectors;
/**
* <p>
* 零部件
* </p>
*
* @since 2024-05-30
*/
@RestController
@RequestMapping("cad/part")
public class CadPartController {
@Autowired
ICadPartService service;
@Autowired
ICadRelationService relationService;
/**
* 獲取所有零部件
* @param dto
* @return
*/
@GetMapping("listAll")
public Result listAll(CadPartDto dto){
List<CadPart> list = new ArrayList<>();
try {
list = service.getList(dto);
if(CollectionUtils.isNotEmpty(list)){
list = getTree(list);
}
} catch (Exception e) {
e.printStackTrace();
return new Result().err();
}
return new Result().ok().setData(list);
}
@PostMapping("add")
@LogOperation(tags = "CAD管理-零部件",serviceClass = ICadPartService.class,entityClass = CadPart.class)
public Result add(@RequestBody CadPart cadPart){
try {
service.saveData(cadPart);
} catch (Exception e) {
e.printStackTrace();
return new Result().err();
}
return new Result().ok().setData(cadPart);
}
@DeleteMapping("delete")
@LogOperation(tags = "CAD管理-零部件",serviceClass = ICadPartService.class,entityClass = CadPart.class)
public Result delete(@RequestBody Long[] ids){
try {
List<Long> idList = Arrays.asList(ids);
List<Long> list = recurveIdList(idList);
service.removeByIds(list);
} catch (Exception e) {
e.printStackTrace();
return new Result().err();
}
return new Result().ok();
}
/**
* 遞歸獲取id樹(shù)
*
* @param ids
* @return
*/
public List<Long> recurveIdList(List<Long> ids){
List<Long> list = new ArrayList<>();
for(Long id: ids){
list.add(id);
//關(guān)系表查子集
List<CadRelation> cadRelations = relationService.list(new QueryWrapper<CadRelation>().eq("parent_id", id));
if(CollectionUtils.isNotEmpty(cadRelations)){
List<Long> partIds = cadRelations.stream().map(CadRelation::getPartId).collect(Collectors.toList());
List<Long> list1 = recurveIdList(partIds);
list.addAll(list1);
}
}
return list;
}
public List<CadPart> getTree(List<CadPart> treeList){
List<CadPart> collect = treeList.stream()
.filter(item -> item.getParentId() == 0)//構(gòu)造最外層節(jié)點(diǎn)，即id=0的節(jié)點(diǎn)
.map(item -> {
item.setChildren(getChildren(item, treeList));//id=0的節(jié)點(diǎn)就為他設(shè)置子節(jié)點(diǎn)
return item;
}).
collect(Collectors.toList());
return collect;
}
private static List<CadPart> getChildren(CadPart treeEntity, List<CadPart> treeEntityList) {
List<CadPart> collect = treeEntityList.stream()
.filter(item -> item.getParentId().equals(treeEntity.getId()))//判斷當(dāng)前節(jié)點(diǎn)的父id是不是要設(shè)置節(jié)點(diǎn)的id
.map(item -> {
item.setChildren(getChildren(item, treeEntityList));//如果是 為其設(shè)置子節(jié)點(diǎn) 通過(guò)遞歸 為每個(gè)除了最外層節(jié)點(diǎn)的節(jié)點(diǎn)設(shè)置子節(jié)點(diǎn)
return item;
})
.collect(Collectors.toList());
return collect;
}前端代碼
<template>
<div class="custom-tree-container">
<!-- <p>Using render-content</p>
<el-tree style="max-width: 600px" :data="dataSource" show-checkbox node-key="id" default-expand-all
:expand-on-click-node="false" :render-content="renderContent" /> -->
<el-button type="primary" class="add-btn" icon="el-icon-circle-plus-outline" @click="addEdit">新增零部件</el-button>
<div style="padding-top: 20px;">
<el-tree style="max-width: 600px; " :data="dataSource" show-checkbox node-key="id" default-expand-all
:expand-on-click-node="false" ref="treeRef" :props="mapProps">
<template #default="{ node, data }">
<span class="custom-tree-node">
<span>{{ node.label }}</span>
<span>
<a @click="append(data)"> 增加子節(jié)點(diǎn) </a>
<a style="margin-left: 8px" @click="removeNode(node, data)"> 刪除 </a>
</span>
</span>
</template>
</el-tree>
</div>
<el-dialog :title="title" v-model="drawer" width="600px">
<el-form :model="partForm" :rules="rules" ref="ruleFormsss" label-width="120px" class="demo-partForm">
<el-form-item label="數(shù)模號(hào)：" prop="partNo">
<el-input v-model="partForm.partNo" clearable></el-input>
</el-form-item>
<el-form-item label="版本號(hào)：" prop="partRev">
<el-input v-model="partForm.partRev" clearable></el-input>
</el-form-item>
<el-form-item label="名稱：" prop="name">
<el-input v-model="partForm.name" clearable></el-input>
</el-form-item>
<el-form-item label="中文名稱：" prop="cName">
<el-input v-model="partForm.cName" clearable></el-input>
</el-form-item>
<el-form-item label="材料：" prop="material">
<el-input v-model="partForm.material" clearable></el-input>
</el-form-item>
<el-form-item label="規(guī)格：" prop="gauge">
<el-input v-model="partForm.gauge" clearable></el-input>
</el-form-item>
<el-form-item label="重量：" prop="massqty">
<el-input v-model="partForm.massqty" clearable></el-input>
</el-form-item>
<el-form-item label="數(shù)據(jù)類型：" prop="partType">
<el-input v-model="partForm.partType" clearable></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancelEdit">取 消</el-button>
<el-button type="primary" @click="saveEdit">確 定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
import { reactive, ref, toRefs, unref, onMounted } from 'vue'
import { add, remove, listAll } from '@api/cad/part'
import { ElMessage } from 'element-plus'
export default {
name: 'part',
setup() {
const state = reactive({
drawer: false,
title: '',
query: {
partName: ''
},
dataSource: [
// {
// id: 1,
// label: 'Level one 1',
// children: []
// // children: [
// // {
// // id: 4,
// // label: 'Level two 1-1',
// // children: [
// // {
// // id: 9,
// // label: 'Level three 1-1-1'
// // }
// // ]
// // }
// // ]
// }
],
mapProps: {
id: 'id',
label: 'name',
children: 'children'
}
})
const treeRef = ref(null)
const append = (data) => {
state.drawer = true
state.title = '添加子節(jié)點(diǎn)'
partForm.parentId = data.id
partForm.partNo = ''
partForm.partRev = ''
partForm.name = ''
partForm.cName = ''
partForm.material = ''
partForm.gauge = ''
partForm.massqty = ''
partForm.partType = ''
// debugger
// 獲取當(dāng)前節(jié)點(diǎn)
// const currentNode = treeRef.value.getNode(data.id)
// // 獲取當(dāng)前節(jié)點(diǎn)在樹(shù)中的索引
// // const currentIndex = getNod(data.id)
// // // 如果索引大于 0，獲取前一個(gè)節(jié)點(diǎn)
// // if (currentIndex > 0) {
// // const prevNode = getNodeAt(currentIndex - 1);
// // const prevId = prevNode.id;
// // // 處理前一個(gè)節(jié)點(diǎn)的 id
// // }
// let treeNodeId = data.$treeNodeId //節(jié)點(diǎn)id
// console.info(data)
// // alert('當(dāng)前id'+data.id)
// // alert(data.$treeNodeId)
// let id = null
// if (!data.children || data.children.length == 0) {
// //沒(méi)有子節(jié)點(diǎn)
// id = data.id * 100 + 1
// } else {
// id = data.id * 100 + 1 + data.children.length
// }
// const newChild = { id: id, label: data.label + '-' + id, children: [] }
// const child = [{ id: id, label: data.label + '-' + id, children: [] }]
// data.children = child
// data.push()
// state.dataSource = [data];
}
const removeNode = (node, data) => {
const ids = []
ids.push(data.id)
remove(ids).then(res => {
if (res.code == 200) {
ElMessage({
type: 'success',
message: '刪除成功'
})
getPartTableData(state.query)
} else {
ElMessage({
type: 'error',
message: res.msg
})
}
})
// dataSource.value = [...dataSource.value];
}
const partForm = reactive({
partNo: '',
partRev: '',
name: '',
cName: '',
material: '',
gauge: '',
massqty: '',
partType: '',
parentId: ''
})
const ruleFormsss = ref(null)
const addEdit = () => {
state.drawer = true
state.title = '添加零部件'
partForm.parentId = ''
partForm.partNo = ''
partForm.partRev = ''
partForm.name = ''
partForm.cName = ''
partForm.material = ''
partForm.gauge = ''
partForm.massqty = ''
partForm.partType = ''
}
// 取消
const cancelEdit = () => {
state.drawer = false
setTimeout(() => {
const form = unref(partFormsss)
form.resetFields()
}, 100)
}
// 新建/編輯零部件
const saveEdit = async () => {
const form = unref(ruleFormsss)
if (!form) return
try {
await form.validate()
if (state.title == '添加零部件' || state.title == '添加子節(jié)點(diǎn)') {
addSavePart()
}
if (state.title == '編輯零部件') {
updateSavePart()
}
state.drawer = false
} catch (error) {
console.error(error)
ElMessage.error('抱歉，您有必填項(xiàng)未填！')
}
}
const addSavePart = () => {
// let quantity = partForm.quantity + partForm.iQuantity
const data = {
partNo: partForm.partNo,
partRev: partForm.partRev,
name: partForm.name,
cName: partForm.cName,
material: partForm.material,
gauge: partForm.gauge,
massqty: partForm.massqty,
partType: partForm.partType,
parentId: partForm.parentId
}
add(data).then(res => {
state.drawer = false
// const treeData = {
// id: res.data.id,
// label: res.data.name,
// children: []
// }
// state.dataSource = res.data
getPartTableData(state.query)
ElMessage.success('恭喜您，添加成功！')
})
}
const updateSavePart = () => {
const data = {
id: state.handleId,
name: partForm.name,
manager: partForm.manager,
startDate: partForm.startDate,
endDate: partForm.endDate
}
update(data).then(res => {
state.drawer = false
getPartTableData(state.query)
ElMessage.success('恭喜您，保存成功！')
})
}
const rules = {
name: [{ required: true, message: '此處為必填項(xiàng)', trigger: 'blur' }]
}
function getPartTableData() {
listAll(state.query).then(res => {
state.dataSource = res.data
})
}
onMounted(() => {
getPartTableData()
})
return {
...toRefs(state),
append,
removeNode,
addEdit,
cancelEdit,
treeRef,
partForm,
ruleFormsss,
saveEdit,
rules
}
}
}
</script>
<style lang="scss" >
.el-tree-node {
margin-top: 8px;
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 18px;
padding-right: 8px;
}
</style>到此這篇關(guān)于java+vue3+el-tree實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)操作的文章就介紹到這了,更多相關(guān)java樹(shù)形結(jié)構(gòu)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- Java如何使用遞歸查詢多級(jí)樹(shù)形結(jié)構(gòu)數(shù)據(jù)(多級(jí)菜單)
- Java使用 Stream 流和 Lambda 組裝復(fù)雜父子樹(shù)形結(jié)構(gòu)
- java返回前端樹(shù)形結(jié)構(gòu)數(shù)據(jù)的2種實(shí)現(xiàn)方式
- 詳解如何使用Java流API構(gòu)建樹(shù)形結(jié)構(gòu)數(shù)據(jù)
- java如何讀取文件目錄返回樹(shù)形結(jié)構(gòu)
- Java中如何將list轉(zhuǎn)為樹(shù)形結(jié)構(gòu)
- Java樹(shù)形結(jié)構(gòu)遞歸查詢方式
相關(guān)文章
Java中CopyOnWriteArrayList的使用解析
這篇文章主要介紹了Java中CopyOnWriteArrayList的使用解析,CopyOnWriteArrayList適合使用在讀操作遠(yuǎn)遠(yuǎn)大于寫(xiě)操作的場(chǎng)景里,比如緩存,它不存在擴(kuò)容的概念,每次寫(xiě)操作都要復(fù)制一個(gè)副本,在副本的基礎(chǔ)上修改后改變Array引用,需要的朋友可以參考下2023-12-12
Java實(shí)現(xiàn)矩陣順時(shí)針旋轉(zhuǎn)90度的示例
今天小編就為大家分享一篇Java實(shí)現(xiàn)矩陣順時(shí)針旋轉(zhuǎn)90度的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
這篇文章主要介紹了深入理解Java中的裝箱和拆箱,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
mybatis參數(shù)String與Integer類型的判斷方式
這篇文章主要介紹了mybatis參數(shù)String與Integer類型的判斷方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Spring session實(shí)現(xiàn)Session共享
本文主要介紹了Spring session實(shí)現(xiàn)Session共享，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Spring?Boot項(xiàng)目通過(guò)RestTemplate調(diào)用三方接口的最佳實(shí)踐
本文詳細(xì)講解了SpringBoot項(xiàng)目中使用RestTemplate調(diào)用第三方接口的實(shí)現(xiàn)方法,本教程將逐步指導(dǎo)您完成整個(gè)過(guò)程,確保結(jié)構(gòu)清晰、易于理解,感興趣的朋友跟隨小編一起看看吧2025-08-08
這篇文章主要為大家詳細(xì)介紹了如何使用java代碼實(shí)現(xiàn)判斷字符串是否為亂碼,文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2026-03-03
Log4j2?重大漏洞編譯好的log4j-2.15.0.jar包下載(替換過(guò)程)
Apache?開(kāi)源項(xiàng)目?Log4j?的遠(yuǎn)程代碼執(zhí)行漏洞細(xì)節(jié)被公開(kāi)，由于?Log4j?的廣泛使用，該漏洞一旦被攻擊者利用會(huì)造成嚴(yán)重危害，下面小編給大家?guī)?lái)了Log4j2?重大漏洞編譯好的log4j-2.15.0.jar包下載，感興趣的朋友一起看看吧2021-12-12
詳解如何在spring boot中使用spring security防止CSRF攻擊
這篇文章主要介紹了詳解如何在spring boot中使用spring security防止CSRF攻擊，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
深入學(xué)習(xí)java并發(fā)包ConcurrentHashMap源碼
這篇文章主要介紹了深入學(xué)習(xí)java并發(fā)包ConcurrentHashMap源碼，整個(gè) ConcurrentHashMap 由一個(gè)個(gè) Segment 組成，Segment 代表”部分“或”一段“的意思，所以很多地方都會(huì)將其描述為分段鎖。,需要的朋友可以參考下2019-06-06