iview+vue+tree组件+dropdown组件：使用Tree组件实现带搜索框，并且鼠标悬浮展示下拉菜单栏

 

<template>
    <div>
        <div class="input-icon-container" style="position: relative; width: 100%; margin-bottom: 10px;">
            <!-- <input placeholder="请输入关键词" v-model="searchText" :search="true" @on-search="hidesearch"
                style="width: calc(100% - 16px);height: 32px;background: rgb(255, 255, 255);border: 1px solid rgb(217, 217, 217);border-radius: 4px;padding-left: 36px;margin-left: 8px;"> -->

            <Input v-model="searchText" :search="true" suffix="ios-search" placeholder="请输入关键词"
                @on-search="hidesearch" />
            <!-- <span @click="searchTree" class="icon gms-iconfont icon16_SS_A_GMS_sousuo" style="position: absolute; left: 18px; top: 50%; 
                transform: translateY(-50%); cursor: pointer; pointer-events: none; width: 20px;">
            </span> -->
        </div>
        <Tree ref="groupTree" :data="treeData" :render="renderContent" @on-select-change="doClickTree"></Tree>
    </div>
</template>
<script>
const rootGroupId = "00000000-0000-0000-0000-000000000000";
import { eventBus, bpm, store } from "@/utils/utils";
export default {
    data() {
        return {
            treeData: [
                {
                    id: rootGroupId,
                    title: '全部',
                    children: []
                }
            ],
            resData: [],
            tempData: [],
            state: store.state,
            buttonProps: {
                type: 'ghost',
                size: 'small',
            },
            searchText: "",
        }
    },
    created() {
        this.queryGroupList
    },
    mounted() {
        eventBus.$on("refreshGroupTree", this.queryGroupList);
        eventBus.$on("deleteGroup", this.deleteGroup);
    },
    watch: {
        /* 参数监听 */
    },
    methods: {
        /*  */
        renderContent(h, { root, node, data }) {
            return h('span', {
                style: {
                    display: 'inline-block',
                    width: '100%'
                },
                on: {
                    /* 鼠标移动显示 */
                    mouseover: () => {
                        this.mouseIn(data)
                    },
                    mouseleave: () => {
                        this.mouseOut(data)
                    }
                }
            }, [
                h('span', {},
                    [
                        h('Icon', {
                            props: {
                                type: 'ios-folder-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),

                        h('span', data.title),

                        h("Dropdown", {
                            style: {
                                float: 'right',
                                marginLeft: "32px",
                            },
                        }, [
                            h("div", {
                                style: {
                                    show: data.show
                                }
                            }, [
                                h("Icon", {
                                    props: {
                                        type: "icon gms-iconfont icon16_SX_A_gms_gengduo"
                                    },
                                    style: {
                                        display: data.show ? "inline-block" : "none"
                                    }
                                })
                            ]),
                            h("DropdownMenu", {
                                slot: "list"
                            }, [
                                h("DropdownItem", {
                                }, [
                                    h("Button", {
                                        style: {
                                            border: "none"
                                        },
                                        on: {

                                        }
                                    }, "编辑")
                                ]),
                                h("DropdownItem", {}, [
                                    h("Button", {
                                        style: {
                                            border: "none"
                                        },
                                        on: {

                                        }
                                    }, "删除")
                                ]),
                            ])
                        ])
                    ])
            ]);
        },
        append(data) {

        },
        remove(root, node, data) {

        },
        mouseIn(data) {
            if (data.id != rootGroupId) {
                this.$set(data, 'show', true)
                console.log(data.show)
            }

        },
        mouseOut(data) {
            this.$set(data, 'show', false)
        },
        /**进行树形列表搜索时处理逻辑*/
        hidesearch(searchText) {
            this.filterTree(this.treeData[0].children, searchText);
            console.log(this.tempData, "zanshi")
            var rootItem = {
                id: rootGroupId,
                title: "全部",
                expand: true,
                children: this.tempData
            }
            this.treeData = [];
            this.treeData.push(rootItem);

        },
        filterTree(nodes, searchQuery) {
            this.tempData = [];
            for (let i = 0; i < nodes.length; i++) {
                if (this.shouldIncludeNode(nodes[i], searchQuery)) {
                }
            };

        },
        shouldIncludeNode(node, searchQuery) {
            // 节点直接包含搜索词或者其子节点包含搜索词
            if (node.title.includes(searchQuery)) {
                node.expand = true
                this.tempData.push(node)
                return true;
            }
            if (node.children) {
                for (let i = 0; i < node.children.length; i++) {
                    this.shouldIncludeNode(node.children[i], searchQuery)
                }
            }
            return false;
        },
        changeNode(node) {
            store.setState("selectedNode", node);
        },
        //重新选中分组
        changeFoucs(item) {
            if (item.parent == rootGroupId) {
                this.changeNode(rootGroupId);
                return;
            }

            var parent = this.resData.find((e) => e.id == item.parent);
            var index = parent.item.children.indexOf(item);
            var length = parent.item.children.length;
            if (length > 1) {
                if (length > index + 1 && index > 0) {
                    this.changeNode(parent.item.children[index + 1]);
                } else {
                    this.changeNode(parent.item.children[length - 2]);
                }
            } else {
                this.changeNode(parent.item);
            }
        },
        doClickTree(data) {
            if (data.length == 0) {
                store.setState("selectedNode", {});
                return;
            }
            store.setState("selectedNode", data[0]);
            eventBus.$emit("refreshDefineTable");
        },
        deleteGroup() {
            if (!this.state.selectedNode.id) {
                this.$Message.info("请选择节点");
                return;
            }
            if (
                this.state.selectedNode.children !== undefined &&
                this.state.selectedNode.children.length > 0
            ) {
                this.$Message.warning("存在子节点数据，请先删除子节点数据");
                return;
            }
            this.$Modal.confirm({
                title: "提示",
                content: "此操作将永久删除该组节点, 是否继续?",
                loading: true,
                onOk: () => {
                    let id = this.state.selectedNode.id;
                    let url = `/workflow/group/delete/${id}`;
                    bpm.post(url).then((res) => {
                        if (res.data.code == 200) {
                            this.$Message.success("删除分组成功！");
                            this.$Modal.remove();
                            this.changeFoucs(this.state.selectedNode);
                            this.queryGroupList();
                        } else {
                            this.$Message.error(res.data.message);
                        }
                    });
                },
            });
        },
        async queryGroupList() {
            this.state.groupLoading = true;
            var res = null;
            try {
                res = await bpm.get("/workflow/group/list");
            } catch (error) { }
            if (res && res.status == "200") {
                this.resData = res.data.t;
                var dataList = res.data.t
                    .filter((e) => e.parent == rootGroupId)
                    .map((i) => this.parseGroupListItem(i));
                var rootItem = {
                    id: rootGroupId,
                    title: "全部",
                    children: dataList
                }
                this.treeData = [];
                this.treeData.push(rootItem);
                console.log(this.treeData)
                eventBus.$emit("refreshDefineTable");
                this.$Message.success("加载分组成功");
            } else {
                this.$Message.error("加载分组失败");
            }
            setTimeout(() => {
                this.state.groupLoading = false;
            }, 200);
        },
        parseGroupListItem(item) {
            var childs = this.resData
                .filter((e) => e.parent == item.id)
                .sort(function (a, b) {
                    var dateA = new Date(a.createDate);
                    var dateB = new Date(b.createDate);
                    if (dateA < dateB) {
                        return -1;
                    }
                    if (dateA > dateB) {
                        return 1;
                    }
                    return 0;
                });
            var selected = this.state.selectedNode.id === item.id;
            if (childs.length == 0) {
                var treeItem = {
                    id: item.id,
                    key: item.title,
                    title: item.name,
                    selected: selected,
                    parent: item.parent,
                    expand: false,
                };
                item["item"] = treeItem;
                return treeItem;
            } else {
                var childList = childs.map((e) => this.parseGroupListItem(e));
                var treeItem = {
                    id: item.id,
                    key: item.title,
                    title: item.name,
                    expand: true,
                    children: childList,
                    selected: selected,
                    parent: item.parent,
                };
                item["item"] = treeItem;
                return treeItem;
            }
        },
    }
}
</script>