• vue2.x + zTree,简单的二次封装(二) -- 添加模糊搜索功能


    注:本方法是根据官方提供的模糊搜索功能fuzzySearch函数进行稍微修改,添加到自己的封装Tree中

    话不多说,直接上效果图

    在这里插入图片描述

    引入zTree以及使用方式请看第一篇文章 vue2.x + zTree,简单的二次封装

    目录层级

    在这里插入图片描述
    目录层级中的文件可以在第一篇文章中找到。

    实现的功能。

    1. 配置zTree 的节点数据 data,属性zTreeNodes。
    2. 配置zTree的setting属性,拆分优化,分为3个优先级
    3. 增加默认展开的节点的 key 的数组, 属性checkNodeKeys
    4. 增加默认展开的节点的 key 的数组, 属性expandNodeKeys
    5. 增加每个树节点用来作为唯一标识的属性, 属性zTreeNodeKey
    6. 整理获取节点的事件,以及返回值
    7. 增加模糊搜索功能

    主要代码:

    1. 在index.vue引入fuzzysearch.js,用来模糊搜索。

      在这里插入图片描述

    2. 使用fuzzySearch()函数

      在这里插入图片描述

    代码如下

    文件:fuzzysearch.js

    /**
     * @param ztree对象的id,不需要#
     * @param keywords 模糊搜索的内容
     * @param isHighLight 是否高亮,默认高亮,传入false禁用
     * @param isExpand 是否展开,默认合拢,传入true展开
     *
     * @returns
     */
    export function fuzzySearch(zTreeId, keywords, isHighLight = true, isExpand = true) {
    	const zTreeObj = $.fn.zTree.getZTreeObj(zTreeId);//get the ztree object by ztree id
    	if (!zTreeObj) {
    		alert("fail to get ztree object");
    	}
    	let nameKey = zTreeObj.setting.data.key.name; //get the key of the node name
    	zTreeObj.setting.view.nameIsHTML = isHighLight; //allow use html in node name for highlight use
    
    	const metaChar = "[\\[\\]\\\\\^\\$\\.\\|\\?\\*\\+\\(\\)]"; //js meta characters
    	const rexMeta = new RegExp(metaChar, "gi");//regular expression to match meta characters
    
    	// keywords filter function
    	function ztreeFilter(zTreeObj, _keywords, callBackFunc) {
    		if (!_keywords) {
    			_keywords = ""; //default blank for _keywords
    		}
    
    		// function to find the matching node
    		function filterFunc(node) {
    			if (node && node.oldname && node.oldname.length > 0) {
    				node[nameKey] = node.oldname; //recover oldname of the node if exist
    			}
    			zTreeObj.updateNode(node); //update node to for modifications take effect
    			if (_keywords.length === 0) {
    				//return true to show all nodes if the keyword is blank
    				zTreeObj.showNode(node);
    				zTreeObj.expandNode(node, false);
    				return true;
    			}
    			//transform node name and keywords to lowercase
    			if (node[nameKey] && node[nameKey].toLowerCase().indexOf(_keywords.toLowerCase()) !== -1) {
    				if (isHighLight) { //highlight process
    					//a new variable 'newKeywords' created to store the keywords information
    					//keep the parameter '_keywords' as initial and it will be used in next node
    					//process the meta characters in _keywords thus the RegExp can be correctly used in str.replace
    					var newKeywords = _keywords.replace(rexMeta, function (matchStr) {
    						//add escape character before meta characters
    						return "\\" + matchStr;
    					});
    					node.oldname = node[nameKey]; //store the old name
    					var rexGlobal = new RegExp(newKeywords, "gi");//'g' for global,'i' for ignore case
    					// use replace(RegExp,replacement) since replace(/substr/g,replacement) cannot be used here
    					node[nameKey] = node.oldname.replace(rexGlobal, function (originalText) {
    						// highlight the matching words in node name
    						return `${originalText}"`;
    					});
    					zTreeObj.updateNode(node); //update node for modifications take effect
    				}
    				zTreeObj.showNode(node);//show node with matching keywords
    				return true; //return true and show this node
    			}
    
    			zTreeObj.hideNode(node); // hide node that not matched
    			return false; //return false for node not matched
    		}
    
    		const nodesShow = zTreeObj.getNodesByFilter(filterFunc); //get all nodes that would be shown
    		processShowNodes(nodesShow, _keywords);//nodes should be reprocessed to show correctly
    	}
    
    	/**
    	 * reprocess of nodes before showing
    	 */
    	function processShowNodes(nodesShow, _keywords) {
    		if (nodesShow && nodesShow.length > 0) {
    			//process the ancient nodes if _keywords is not blank
    			if (_keywords.length > 0) {
    				$.each(nodesShow, function (n, obj) {
    					var pathOfOne = obj.getPath();//get all the ancient nodes including current node
    					if (pathOfOne && pathOfOne.length > 0) {
    						//i < pathOfOne.length-1 process every node in path except self
    						for (var i = 0; i < pathOfOne.length - 1; i++) {
    							zTreeObj.showNode(pathOfOne[i]); //show node
    							zTreeObj.expandNode(pathOfOne[i], true); //expand node
    						}
    					}
    				});
    			} else { //show all nodes when _keywords is blank and expand the root nodes
    				var rootNodes = zTreeObj.getNodesByParam("level", "0");//get all root nodes
    				$.each(rootNodes, function (n, obj) {
    					zTreeObj.expandNode(obj, true); //expand all root nodes
    				});
    			}
    		}
    	}
    
    	ztreeFilter(zTreeObj, keywords); //lazy load ztreeFilter function
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96

    文件:r-z-tree/index.vue

    <template>
        <section class="r-z-tree">
            <slot name="form">
                <div class="default-search-form">
                    <el-input
                            suffix-icon="el-icon-search"
                            placeholder="请输入关键字"
                            v-model="keyword"
                            size="mini"
                            clearable
                            @keyup.enter.native="createFuzzySearch"
                            @clear="createFuzzySearch"
                    >
                    </el-input>
                    <el-button type="primary" size="mini" @click="createFuzzySearch">查询</el-button>
                </div>
            </slot>
            <ul :id="treeId" class="ztree"></ul>
    
        </section>
    </template>
    
    <script>
        import _ from "lodash";
        import $ from "jquery";
        import "@ztree/ztree_v3/js/jquery.ztree.core.min.js";
        import "@ztree/ztree_v3/js/jquery.ztree.excheck.min.js";
        import "@ztree/ztree_v3/js/jquery.ztree.exedit.min.js";
        import "@ztree/ztree_v3/js/jquery.ztree.exhide.min.js";
        import "@ztree/ztree_v3/css/zTreeStyle/zTreeStyle.css";
        import "@ztree/ztree_v3/css/metroStyle/metroStyle.css";
        import props from "./props";
        import settingConfig, * as settingFun from "./setting";
        import { fuzzySearch } from "./js/fuzzysearch";
    
        export default {
            props,
            name: "r-z-tree",
            data() {
                return {
               		keyword: "",
                    treeObj: null,
                    dialogVisible: false,
                };
            },
            computed: {
                settingDeep() {
                    // props传输setting,最高优先级
                    const zTreeSetting = this.setting;
                    // props传输setting.check
                    const zTreeCheck = this.zTreeCheck;
                    // props传输setting.data.keep
                    const zTreeKeep = this.zTreeKeep;
                    // props传输setting.data.key
                    const zTreeKey = this.zTreeKey;
                    // props传输setting.data.simpleData
                    const zTreeSimpleData = this.zTreeSimpleData;
                    // props传输setting.data.render
                    const zTreeRender = this.zTreeRender;
                    // props传输setting.edit
                    const zTreeEdit = this.zTreeEdit;
                    // props传输setting.view
                    const zTreeView = this.zTreeView;
    
                    // 默认使用settingConfig中的配置,最低优先级
                    let setting = _.cloneDeep(settingConfig(this));
    
                    // 最高优先级 props传输setting
                    if (zTreeSetting) return zTreeSetting;
                    // 其次优先级
                    // 自定义setting.check
                    if (zTreeCheck) setting.check = { ...setting.check, ...zTreeCheck };
                    // 自定义setting.data.keep
                    if (zTreeKeep) setting.data.keep = { ...setting.data.keep, ...zTreeKeep };
                    // 自定义setting.data.key
                    if (zTreeKey) setting.data.key = { ...setting.data.key, ...zTreeKey };
                    // 自定义setting.data.simpleData
                    if (zTreeSimpleData) setting.data.simpleData = { ...setting.data.simpleData, ...zTreeSimpleData };
                    // 自定义setting.data.render
                    if (zTreeRender) setting.data.render = { ...setting.data.render, ...zTreeRender };
                    // 自定义setting.edit
                    if (zTreeEdit) setting.edit = { ...setting.edit, ...zTreeEdit };
                    // 自定义setting.view
                    if (zTreeView) setting.view = { ...setting.view, ...zTreeView };
                    return setting;
                },
            },
            watch: {
                zTreeNodes: {
                    handler() {
                        if (this.zTreeNodes.length > 0) {
                            // 销毁zTree
                            this.destroyTree();
                            // 初始化zTree
                            this.zTreeInit();
                        }
                    },
                    deep: true,
                    immediate: true,
                },
                checkNodeKeys: {
                    handler() {
                        // zTree 的节点已选择的keys
                        if (this.checkNodeKeys.length > 0) this.zTree_checkNodes();
                    },
                    deep: true,
                    immediate: true,
                },
                expandNodeKeys: {
                    handler() {
                        // zTree 的节点已展开的keys
                        if (this.expandNodeKeys.length > 0) this.zTree_expandNodes();
                    },
                    deep: true,
                    immediate: true,
                },
            },
            methods: {
                async zTree_checkNodes() {
                    try {
                        // 选择指定节点 keys checkNodeKeys = []
                        const { treeObj } = await this.zTreeInit();
                        const nodeKey = settingFun.createZTreeNodeKey(treeObj, this.zTreeNodeKey);
                        for (let value of this.checkNodeKeys) {
                            const node = await this.getNodesByParam(nodeKey, value);
                            if (node.length !== 1) {
                                console.error(`设置的zTreeNodeKey或setting.data.simpleData.idKey不是唯一值。nodeKey=${ nodeKey }`);
                                if (node.length === 0) continue;
                            }
                            this.checkNode(node[0], true, true);
                        }
                    } catch (e) {
                        console.error("选择指定节点 keys checkNodeKeys = []", e);
                    }
                },
                async checkNode(treeNode, checked = null, checkTypeFlag = null, callbackFlag = false) {
                    try {
                        // 勾选 或 取消勾选 单个节点。[setting.check.enable = true 时有效]
                        const { treeObj } = await this.zTreeInit();
                        treeObj.checkNode(treeNode, checked, checkTypeFlag, callbackFlag);
                    } catch (e) {
                        console.error("勾选 或 取消勾选 单个节点。[setting.check.enable = true 时有效]", e);
                    }
                },
                async checkAllNodes(checked = true) {
                    try {
                        // 勾选 或 取消勾选 全部节点。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时有效]
                        // 此方法不会触发 beforeCheck / onCheck 事件回调函数。
                        const { treeObj } = await this.zTreeInit();
                        treeObj.checkAllNodes(checked);
                    } catch (e) {
                        console.error("勾选 或 取消勾选 全部节点。[setting.check.enable = true 且 setting.check.chkStyle = \"checkbox\" 时有效]", e);
                    }
                },
                async zTree_expandNodes() {
                    try {
                        // 展开指定节点 expandNodeKeys = []
                        const { treeObj } = await this.zTreeInit();
                        const nodeKey = settingFun.createZTreeNodeKey(treeObj, this.zTreeNodeKey);
                        for (let value of this.expandNodeKeys) {
                            const node = await this.getNodesByParam(nodeKey, value);
                            if (node.length !== 1) {
                                console.error(`设置的zTreeNodeKey或setting.data.simpleData.idKey不是唯一值。nodeKey=${ nodeKey }`);
                                if (node.length === 0) continue;
                            }
                            this.expandNode(node[0], true);
                        }
                    } catch (e) {
                        console.error("展开指定节点 expandNodeKeys = []", e);
                    }
                },
                async expandNode(treeNode, expandFlag = null, sonSign = false, focus = true, callbackFlag = false) {
                    try {
                        // 展开 / 折叠 指定的节点
                        const { treeObj } = await this.zTreeInit();
                        return treeObj.expandNode(treeNode, expandFlag, sonSign, focus, callbackFlag);
                    } catch (e) {
                        console.error("展开 / 折叠 指定的节点", e);
                    }
                },
                async setEditable(editable) {
                    try {
                        // 设置 zTree 进入 / 取消 编辑状态。
                        // 对于编辑状态的各种功能需要提前设置对应 setting 中的不同属性
                        // 请通过 zTree 对象执行此方法。
                        // editable Boolean true 表示进入 编辑状态; false 表示取消 编辑状态
                        const { treeObj } = await this.zTreeInit();
                        treeObj.setEditable(editable);
                    } catch (e) {
                        console.error("设置 zTree 进入 / 取消 编辑状态。", e);
                    }
                },
                onAddNodeSubmit(treeObj, treeNode, newNode) {
                    this.$emit("on-add-node", treeObj, treeNode, newNode);
                },
                async editName(treeNode) {
                    try {
                        // 设置某节点进入编辑名称状态。
                        // 1、如果需要用 js 取消编辑名称状态,请使用 cancelEditName(newName) 方法。
                        // 2、可利用此方法让当前正编辑的节点 input 输入框获取焦点。
                        // 3、请通过 zTree 对象执行此方法。
                        const { treeObj } = await this.zTreeInit();
                        treeObj.editName(treeNode);
                    } catch (e) {
                        console.error("设置某节点进入编辑名称状态", e);
                    }
                },
                async updateNode(treeNode, checkTypeFlag) {
                    try {
                        // 更新某节点数据,主要用于该节点显示属性的更新。
                        // 1、可针对 name、target、 url、icon、 iconSkin、checked、nocheck 等这几个用于显示效果的参数进行更新,
                        // 其他用于 zTreeNodes 的参数请不要随意更新,对于展开节点,还请调用 expandNode方法,因此请勿随意修改 open 属性。
                        // 2、用此方法修改 checked 勾选状态不会触发 beforeCheck / onCheck 事件回调函数。
                        // 请通过 zTree 对象执行此方法。
                        const { treeObj } = await this.zTreeInit();
                        treeObj.updateNode(treeNode, checkTypeFlag);
                    } catch (e) {
                        console.error("更新某节点数据,主要用于该节点显示属性的更新。", e);
                    }
                },
                async removeNode(treeNode, callbackFlag = false) {
                    try {
                        // 删除节点 treeNode [string, Number, Object],可以传node-key或treeNode
                        const { treeObj } = await this.zTreeInit();
                        const nodeKey = settingFun.createZTreeNodeKey(treeObj, this.zTreeNodeKey);
                        // 如果传的treeNode直接使用,如果传的node-key,先获取treeNode
                        treeNode = typeof treeNode === "object" ? treeNode : await this.getNodeByParam(nodeKey, treeNode);
                        const zTreeObject = $.fn.zTree.getZTreeObj(this.treeId);
                        zTreeObject.removeNode(treeNode, callbackFlag);
                    } catch (e) {
                        console.error("删除节点", e);
                    }
                },
                getCheckedNodes() {
                    // 开启复选框和单选框 setting.check.enable = true
                    // 获取zTree已选择的树节点 返回值 checkNodes Array, checkKeys Array
                    return settingFun.createZTreeCheckNodes(this.treeId, this.zTreeNodeKey);
                },
                getSelectedNodes() {
                    // 未开启复选框和单选框 setting.check.enable = false
                    // 获取 zTree 当前被选中的节点数据集合 selectNodes Array, selectKeys Array
                    return settingFun.createZTreeSelectNodes(this.treeId, this.zTreeNodeKey);
                },
                async getNodeByParam(key, value, parentNode = null) {
                    try {
                        // 根据节点数据的属性搜索,获取条件完全匹配的节点数据 JSON 对象 如无结果,返回 null
                        const { treeObj } = await this.zTreeInit();
                        return treeObj.getNodeByParam(key, value, parentNode);
                    } catch (e) {
                        console.error("根据节点数据的属性搜索,获取条件完全匹配的节点数据 JSON 对象", e);
                    }
                },
                async getNodesByParam(key, value, parentNode = null) {
                    try {
                        // 根据节点数据的属性搜索,获取条件完全匹配的节点数据 JSON 对象集合 如无结果,返回 [ ]
                        const { treeObj } = await this.zTreeInit();
                        return treeObj.getNodesByParam(key, value, parentNode);
                    } catch (e) {
                        console.error("根据节点数据的属性搜索,获取条件完全匹配的节点数据 JSON 对象集合", e);
                    }
                },
                createFuzzySearch() {
                    // 模糊搜索
                    fuzzySearch(this.treeId, this.keyword);
                },
                destroyTree() {
                    // 销毁zTree
                    if (this.treeObj) {
                        this.treeObj.destroy();
                        this.treeObj = null;
                    }
                },
                zTreeInit() {
                    // 初始化zTree
                    return new Promise(resolve => {
                        this.$nextTick(() => {
                            if (this.treeObj) return resolve({ treeObj: this.treeObj });
                            this.treeObj = $.fn.zTree.init($(`#${ this.treeId }`), this.settingDeep, this.zTreeNodes);
                            console.log(`创建zTree-id=${ this.treeId }`);
                            return resolve({ treeObj: this.treeObj });
                        });
                    });
                },
            },
            beforeDestroy() {
                // 销毁zTree
                this.destroyTree();
            },
        };
    </script>
    
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264
    • 265
    • 266
    • 267
    • 268
    • 269
    • 270
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277
    • 278
    • 279
    • 280
    • 281
    • 282
    • 283
    • 284
    • 285
    • 286
    • 287
    • 288
    • 289
    • 290
    • 291
    • 292

    使用,效果如上图所示

    <template>
        <el-row :gutter="20">
           <el-col :span="6">
               <h1>封装的搜索</h1>
               <r-z-tree
                       ref="zTreeRef"
                       treeId="treeId1"
                       :z-tree-nodes="zTreeNodes"
                       :expand-node-keys="[1]"
                       :check-node-keys="checkNodeKeys"
                       :z-tree-check="zTreeCheck"
                       :z-tree-simple-data="zTreeSimpleData"
               ></r-z-tree>
           </el-col>
           <el-col :span="6">
               <h1>可自定义搜索,使用slot="form"</h1>
               <r-z-tree
                       ref="zTreeRef"
                       treeId="treeId2"
                       :z-tree-nodes="zTreeNodes"
                       :expand-node-keys="[1]"
                       :check-node-keys="checkNodeKeys"
                       :z-tree-check="zTreeCheck"
                       :z-tree-simple-data="zTreeSimpleData"
               >
                   <div class="search-form" slot="form">
                       <el-input
                               suffix-icon="el-icon-search"
                               placeholder="请输入关键字"
                               v-model="keyword"
                               size="mini"
                               clearable
                               @keyup.enter.native="createFuzzySearch"
                               @clear="createFuzzySearch"
                       >
                       </el-input>
                       <el-button type="primary" size="mini" @click="createFuzzySearch">查询</el-button>
                   </div>
               </r-z-tree>
           </el-col>
       </el-row>
    </template>
    
    <script>
        const treeData = [
            {
                "id": 1,
                "name": "根节点",
                "parentId": 0,
                "isSite": 0,
                "typeCode": null,
                "typeName": null,
                "sortNumber": 1,
                "children": [
                    {
                        "id": 11,
                        "name": "二级节点1-1",
                        "parentId": 1,
                        "isSite": 0,
                        "typeCode": null,
                        "typeName": null,
                        "sortNumber": 1,
                        "children": [
                            {
                                "id": 111,
                                "name": "三级节点1-1-1",
                                "parentId": 1,
                                "isSite": 0,
                                "typeCode": null,
                                "typeName": null,
                                "sortNumber": 1
                            },
                            {
                                "id": 112,
                                "name": "三级节点1-1-2",
                                "parentId": 1,
                                "isSite": 0,
                                "typeCode": null,
                                "typeName": null,
                                "sortNumber": 1
                            }
                        ]
                    },
                    {
                        "id": 12,
                        "name": "二级节点1-2",
                        "parentId": 1,
                        "isSite": 0,
                        "typeCode": null,
                        "typeName": null,
                        "sortNumber": 1,
                        "children": [
                            {
                                "id": 121,
                                "name": "三级节点1-2-1",
                                "parentId": 12,
                                "isSite": 0,
                                "typeCode": null,
                                "typeName": null,
                                "sortNumber": 1
                            },
                            {
                                "id": 112,
                                "name": "三级节点1-2-2",
                                "parentId": 12,
                                "isSite": 0,
                                "typeCode": null,
                                "typeName": null,
                                "sortNumber": 1
                            }
                        ]
                    },
                    {
                        "id": 13,
                        "name": "二级节点1-3",
                        "parentId": 1,
                        "isSite": 0,
                        "typeCode": null,
                        "typeName": null,
                        "sortNumber": 1,
                        "children": [
                            {
                                "id": 131,
                                "name": "三级节点1-3-1",
                                "parentId": 13,
                                "isSite": 0,
                                "typeCode": null,
                                "typeName": null,
                                "sortNumber": 1
                            },
                            {
                                "id": 132,
                                "name": "三级节点1-3-2",
                                "parentId": 13,
                                "isSite": 0,
                                "typeCode": null,
                                "typeName": null,
                                "sortNumber": 1
                            }
                        ]
                    },
                    {
                        "id": 14,
                        "name": "二级节点1-4",
                        "parentId": 1,
                        "isSite": 0,
                        "typeCode": null,
                        "typeName": null,
                        "sortNumber": 1,
                        "children": [
                            {
                                "id": 141,
                                "name": "三级节点1-4-1",
                                "parentId": 14,
                                "isSite": 0,
                                "typeCode": null,
                                "typeName": null,
                                "sortNumber": 1
                            },
                            {
                                "id": 142,
                                "name": "三级节点1-4-2",
                                "parentId": 14,
                                "isSite": 0,
                                "typeCode": null,
                                "typeName": null,
                                "sortNumber": 1
                            }
                        ]
                    }
                ]
            }
        ]
        export default {
            name: "base1",
            data() {
                return {
                    zTreeNodes: treeData,
                    checkNodeKeys: [31895, 31896, 31898, 31899],
                    zTreeCheck: {
                        enable: true,
                    },
                    zTreeSimpleData: {
                        enable: true,
                    },
                    keyword: "",
                };
            },
            methods: {
                createFuzzySearch(){
                   
                },
            },
        };
    </script>
    
    <style scoped>
        .search-form {
            display: flex;
        }
    </style>
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
  • 相关阅读:
    Ubuntu20.04.1编译qt6.5.3版mysql驱动
    封装图片处理工具类,实现图片的裁剪、压缩、图片水印、文字水印、多行文字水印等功能
    linux系统命令-查看内存使用情况
    leetcode 647. 回文子串、516. 最长回文子序列
    高等数学(第七版)同济大学 总习题六 个人解答
    数据建设实践之大数据平台(五)安装hive
    Hive 表 DML 操作——Hive 表 DML 操作——第1关:将文件中的数据导入(Load)到 Hive 表中
    Command SwiftCompile failed with a nonzero exit code
    输电线路故障诊断(Python代码,逻辑回归、决策树、随机森林、XGBoost和支持向量机五种不同方法诊断)
    容器运行时与k8s概述
  • 原文地址:https://blog.csdn.net/mf_717714/article/details/126864127