1、效果


1、代碼

<template><Button type="primary" @click="modal = true">點擊選擇</Button><div v-if="selectedArr.length > 0"><p>已選擇項：</p><div v-for="(item, index) in selectedArr" :key="index">{{ item.title }}</div></div><Modal width="600" v-model="modal" title="請選擇" @on-ok="ok" @on-cancel="cancel"><div class="tr-modal"><div class="org-tree"><div class="title"><span>組織機構</span><Input v-model="keyOrg" @on-change="onInput" placeholder="請輸入"></Input></div><Treeref="tree"class="tree-main"@on-check-change="onCheckChange":data="data"show-checkboxcheck-directlymultiple></Tree></div><div class="to-right"><Icon type="ios-arrow-forward" size="30" color="#1890ff" /></div><div class="select-con"><div class="title"><span>已選擇項</span></div><div class="to-right"><ul class="select-ul"><liv-for="(item, index) in selectedArr":key="index"@mouseenter="item.ishover = true"@mouseleave="item.ishover = false"@click="onDelete(index, item)"><span>{{ item.title }}</span><Icon v-if="item.ishover" type="md-close" size="20" color="#1890ff" /></li></ul></div></div></div></Modal>
</template>
<script>
export default {data() {return {modal: false,selectedArr: [],data: [{industryName: '農業、林業',node: 1,children: [{industryName: '農產品基地項目（含藥材基地）',children: [],id: '01--001',title: '01--001_農產品基地項目（含藥材基地）',industryState: '1',parentId: '01',industryCode: '01--001',},{industryName: '經濟林基地項目',children: [],id: '01--002',title: '01--002_經濟林基地項目',industryState: '1',parentId: '01',industryCode: '01--002',},],id: '01',title: '01_農業、林業',industryState: '1',parentId: null,industryCode: '01',},{industryName: '畜牧業',node: 1,children: [{industryName: '牲畜飼養；家禽飼養；其他畜牧業',children: [],id: '02--003',title: '02--003_牲畜飼養；家禽飼養；其他畜牧業',industryState: '1',parentId: '02',industryCode: '02--003',},],id: '02',title: '02_畜牧業',industryState: '1',parentId: null,industryCode: '02',},{industryName: '漁業',node: 1,children: [{industryName: '海水養殖',children: [],id: '03--004',title: '03--004_海水養殖',industryState: '1',parentId: '03',industryCode: '03--004',},{industryName: '內陸養殖',children: [],id: '03--005',title: '03--005_內陸養殖',industryState: '1',parentId: '03',industryCode: '03--005',},],id: '03',title: '03_漁業',industryState: '1',parentId: null,industryCode: '03',},],keyOrg: '',dataCp: [],}},methods: {ok() {this.$Message.info('Clicked ok')},cancel() {this.$Message.info('Clicked cancel')},onInput() {if (this.keyOrg) {let flattenTree = this.flattenTree(this.dataCp)let filterChildren = flattenTree.filter((el) => el.parentId && el.title.includes(this.keyOrg),)this.data = filterChildren} else {this.data = this.dataCp}},onDelete(index, item) {this.selectedArr.splice(index, 1)// 先扁平化let flattenTree = this.flattenTree(this.data)// 先根據parentId找到當前項的父節點let parent = flattenTree.find((el) => el.id == item.parentId)if (parent) {parent.checked = false}//   再取消勾選let checkItem = flattenTree.find((el) => el.id == item.id)checkItem.checked = false//   再還原成樹形結構this.data = this.unflattenTree(flattenTree)},onCheckChange(prev, curr) {// 選中if (curr.checked) {// 選中的節點沒有子節點（選中一個）if (curr.children.length === 0) {curr.ishover = falsethis.selectedArr.push(curr)} else {// 選中的節點有子節點（選中一個，然后勾選其子節點）curr.children.forEach((el) => {el.ishover = false})this.selectedArr.push(...curr.children)}} else {// 選中的節點沒有子節點（選中一個）if (curr.children.length === 0) {// 取消let index = this.selectedArr.findIndex((item) => item.id == curr.id)// 刪除已選項this.selectedArr.splice(index, 1)} else {curr.children.forEach((el) => {// 取消let index = this.selectedArr.findIndex((item) => item.id == el.id)// 刪除已選項this.selectedArr.splice(index, 1)})}}},// 扁平化樹形數據flattenTree(treeData) {const result = []function flatten(node) {// 創建新節點對象（淺拷貝，避免修改原對象）const newNode = { ...node }// 如果有子節點，先遞歸處理子節點if (Array.isArray(newNode.children) && newNode.children.length > 0) {// 臨時保存子節點引用const children = newNode.children// 移除children屬性（根據需求可選）delete newNode.children// 將當前節點加入結果result.push(newNode)// 遞歸處理子節點children.forEach((child) => flatten(child))} else {// 無子節點直接加入結果result.push(newNode)}}// 遍歷所有根節點treeData.forEach((root) => flatten(root))return result},// 將扁平數據還原為樹形結構unflattenTree(flatData) {// 創建ID映射字典和結果集const nodeMap = {}const roots = []// 第一遍遍歷：創建所有節點的映射flatData.forEach((node) => {nodeMap[node.id] = { ...node, children: [] }})// 第二遍遍歷：構建樹形結構flatData.forEach((node) => {const currentNode = nodeMap[node.id]if (node.parentId) {// 找到父節點并添加到其childrenconst parent = nodeMap[node.parentId]if (parent) {parent.children.push(currentNode)}} else {// 根節點roots.push(currentNode)}})return roots},},mounted() {this.dataCp = JSON.parse(JSON.stringify(this.data))},
}
</script><style lang="scss" scoped>
.tr-modal {display: flex;height: 400px;.org-tree {width: 260px;height: 100%;border: 1px solid #d9d9d9;}.to-right {display: flex;align-items: center;margin: 0 5px;cursor: pointer;}.select-con {width: 260px;border: 1px solid #d9d9d9;}.title {height: 32px;display: flex;align-items: center;border-bottom: 1px solid #d9d9d9;span {display: flex;font-size: 14px;color: #1890ff;justify-content: center;align-items: center;width: 70px;font-weight: 700;}:deep(.ivu-input-wrapper) {flex: 1;width: auto;}}.tree-main {height: calc(100% - 32px);overflow-y: auto;}.select-ul {width: 100%;li {padding: 0 5px;height: 24px;display: flex;align-items: center;font-size: 14px;justify-content: space-between;margin: 4px 0;background-color: #eee;span {width: 90%;overflow: hidden;white-space: nowrap;}}}
}
</style>