{"id":22998935,"url":"https://github.com/ayiaq1/el-tree-select","last_synced_at":"2025-04-05T00:09:41.564Z","repository":{"id":31991298,"uuid":"123912877","full_name":"ayiaq1/el-tree-select","owner":"ayiaq1","description":"基于element-ui2.x扩展下拉树","archived":false,"fork":false,"pushed_at":"2023-04-23T17:27:24.000Z","size":8952,"stargazers_count":222,"open_issues_count":7,"forks_count":95,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-04-25T08:22:34.036Z","etag":null,"topics":["element-ui","select","tree","vue"],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ayiaq1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2018-03-05T11:57:58.000Z","updated_at":"2024-04-25T08:22:34.036Z","dependencies_parsed_at":"2023-12-04T08:47:27.850Z","dependency_job_id":null,"html_url":"https://github.com/ayiaq1/el-tree-select","commit_stats":{"total_commits":97,"total_committers":7,"mean_commits":"13.857142857142858","dds":0.3917525773195877,"last_synced_commit":"5026924b686320d73acc437afb6869737073aa5b"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayiaq1%2Fel-tree-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayiaq1%2Fel-tree-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayiaq1%2Fel-tree-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayiaq1%2Fel-tree-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ayiaq1","download_url":"https://codeload.github.com/ayiaq1/el-tree-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247266564,"owners_count":20910836,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["element-ui","select","tree","vue"],"created_at":"2024-12-15T06:14:52.294Z","updated_at":"2025-04-05T00:09:41.550Z","avatar_url":"https://github.com/ayiaq1.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\n * @moduleName: 基于element-ui 2.x扩展下拉带树的组件 下拉树状菜单\n * @Author: dawdler\n * @Date: 2018-12-19 14:03:03\n * @LastModifiedBy: dawdler\n * @LastEditTime: 2021-08-06 15:51:45\n --\u003e\n\n## 基于 element-ui 2.x 扩展下拉带树的组件 下拉树状菜单\n\n### Demo\n\n##### \u003ca href=\"https://ayiaq1.github.io/el-tree-select/website/#/components/ElTreeSelect\" target=\"_blank\"\u003e在线 API\u003c/a\u003e\n\n##### \u003ca href=\"https://ayiaq1.github.io/el-tree-select/storybook-static\" target=\"_blank\"\u003e在线测试\u003c/a\u003e\n\n###\n\n![Image text](https://github.com/ayiaq1/el-tree-select/raw/master/DEMO.jpg)\n\n### 如果本地启动 API 需要全局安装：npm install -g @vuese/cli\n\n### 需在 main.js 注册组件：\n\n```\nimport ElTreeSelect from 'el-tree-select';\nvue.use(ElTreeSelect);\n内部直接使用 :  \u003cel-tree-select v-model=\"id\"/\u003e\n```\n\n### API：\n\n#### 特殊点(屏蔽 el-select、el-tree 的几个参数)：\n\n##### el-select 取消参数:\n\n```\nmultiple                       改为内置，通过v-model类型判断是否多选\n:filterable=\"false\"            搜索从弹出框里面执行\n```\n\n##### el-tree 取消参数：\n\n```\n:show-checkbox=\"selectParams.multiple\"  使用下拉框参数multiple 判断是否对树进行多项 取消对el-tree的人为传参show-checkbox\n:node-key=\"propsValue\"  自动获取treeParams.props.value\n:draggable=\"false\"      屏蔽拖动\n```\n\n#### 支持的参数：\n\n#### el-select 参数：\n\n```\nselectParams  :     支持el-select 相关参数\n\n#### styles参数：\nstyles 对el-select设置style,类型:Object\n\n#### selectClass参数：\nselectClass  对el-select设置class,类型:String\n```\n\n#### el-tree 参数：\n\n```\ntreeParams  :     支持el-tree 相关参数\n增加：'clickParent'\ntreeParams.clickParent 类型：Boolean 默认：false\n在selectParams.multiple=false单选情况下点击节点，判断是否关闭弹出框\nclickParent: true 允许点击父级关闭弹出框 false 只能点击子级关闭弹出框\n```\n\n#### popover 参数：\n\n```\npopoverClass  对应：popper-class,类型:String\n```\n\n#### 搜索框参数：\n\n```\ntreeParams.filterable   Boolean 考虑是显示在弹出框内的，因此放到treeParams参数内\n```\n\n### 事件:\n\n###### filter-node-method\n\n```\nfilter-node-method 自定义过滤方式\n```\n\n###### select-clear\n\n```\nselect-clear 下拉框清空事件   this.$emit('select-clear');\n```\n\n###### removeTag\n\n```\nremoveTag 移除单个标签，返回所有勾选的ids，以及当前移除的tag（可能为中文）标签   this.$emit('removeTag',ids,tag);\n```\n\n###### node-click\n\n```\n树点击,和el-tree参数一致: this.$emit('node-click', data, node, vm);\n```\n\n###### check\n\n```\n勾选触发,和el-tree参数一致: this.$emit('check',data, node, vm);\n```\n\n###### treeDataUpdateFun\n\n```\ntreeDataUpdateFun 树更新数据\n\nthis.post(url,postobj,response=\u003e{\n    this.$refs.treeSelect.treeDataUpdateFun(response.data);\n});\n```\n\n###### searchFun 参数: keywords\n\n```\nsearchFun(value){\n    // 如果是本地过滤：\n    this.$refs.treeSelect.$refs.tree.filter(value);\n    // 可以直接访问方法，也可以拿到 $refs.tree\n    this.$refs.treeSelect.filterFun(val);\n    // 如果是请求后台：\n    this.post(url,postobj:{\n        keywords:value\n    },response=\u003e{\n        this.$refs.treeSelect.treeDataUpdateFun(response.data);\n    });\n}\n```\n\n###### filterFun 参数: 本地过滤树\n\n```\nthis.$refs.treeSelect.filterFun(val);\n```\n\n### 更新日志\n    3.1.14 package.json增加BSD协议，合并提交 [暴露 el-popover 的 transition 属性]https://github.com/ayiaq1/el-tree-select/pull/72\n    3.1.13 \n          1.增加demo调试。\n          2.处理clickParent点击父节点判断问题。\n          3.打包优化，不再强制打包vue,element-ui。（要求项目必须引入element-ui）\n    3.1.12 增加参数：子叶节点返回过滤(treeParams-\u003eleafOnly, includeHalfChecked)\n    3.1.11 增加参数：filter-node-method\n    3.1.10 修复bug:多选下如果父子节点全选，el-tag单一节点取消失败。\n    3.1.9 锁定element-ui最终版本2.13.2。修复bug:多选下如果父子节点全选，el-tag单一节点取消失败。\n    3.1.8 增加popover获取鼠标对象的多浏览器兼容性判断\n    3.1.7 处理popover隐藏时判断当前对象报错问题\n    3.1.4  去掉selectParams.multiple参数，改为内置，由v-model判断类型,v-model增加Number类型\n    3.1.3  扩展，支持下拉框和popover挂类,修复了文档说明bug\n    3.1.2  扩展，支持挂类\n    3.1.1  默认v-model增加兼容性判断\n    3.1.0  升级为vue-cli3，添加部分测试，添加api文档\n    3.0.16 修复disabled还能点击的问题\n    3.0.15 增加disabled参数判断\n    3.0.15 增加treeParams.clickParent参数,默认false,只允许点击子级关闭弹出框\n    3.0.13\n        1.增加判断multiple,如果多选，点击父级不关闭弹出框\n        2.修复点击节点没有切换多选问题\n        3.修复多选时下拉框没有更新位置问题\n        4.优化代码\n    3.0.12 修复文本框修改宽度之后，下拉框不一致\n    3.0.11 修复子节点名称不为children时，tag勾选联动问题\n    3.0.10 修复单选状态下清空报错问题，优化逻辑判断\n    3.0.9 增加树check方法，修复select多选移除时树没有联动取消勾选问题\n    3.0.8 修复treeDataUpdateFun更新数据时，单选没有赋值问题\n    3.0.7 修复v-model问题\n    3.0.6 增加对el-select设置style\n    3.0.5 提取dom.js精简，缩小体积\n    3.0.4 修复搜索框焦点隐藏弹出框问题\n    3.0.3 增加disabled，打包压缩\n    3.0.2 增加容错判断\n    3.0.1 修复IE9以上兼容性\n    3.0.0 全新api，支持el-tree,el-select相关参数\n    2.0.6:增加搜索栏隐藏参数,从业务上考虑clickParent=true隐藏父级，展开搜索只在三角箭头点击\n    2.0.5:demo增加子节点测试数据\n    2.0.4:清空选择增加事件clearFun\n    2.0.3:新增清空选择，clearable默认为true\n    2.0.2:优化：默认clickParent=true,取消箭头图标点击事件使用input默认点击\n    2.0.0:修复IE兼容性，修复打包有压缩警告问题，剥离element-ui，可作为独立插件使用\n    1.6.5:有压缩不成功的警告(webpack配置压缩对element-ui下的request不生效)\n    1.6.0:修复element-ui打包会有压缩不成功的警告，锁定package.json的vue,element-ui版本\n    1.5.0:修复element-ui更新之后不显示插件的问题\n    1.4.9:demo的名称导入错误修改\n    1.4.8:修复部分代码打包没有压缩问题\n    1.4.7:props.id改为props.value\n    1.4.6:修复clickParent=true之后点击父级关闭下拉问题，补全API：disabled\n    1.4.5:修改webpack配置，打包css忽略z-index\n    1.4.4:增加CSS样式\n    1.4.3:增加clickParent，判断树菜单点击是否支持直接点击父级\n\n### DEMO (App.vue)\n\n```\n\u003ctemplate\u003e\n    \u003cdiv id=\"app\"\u003e\n        \u003cel-tree-select :styles=\"styles\" v-model=\"values\" :selectParams=\"selectParams\" :treeParams=\"treeParams\" :treeRenderFun=\"_renderFun\" @searchFun=\"_searchFun\" @node-click=\"_nodeClickFun\" ref=\"treeSelect\"/\u003e\n        \u003cel-select multiple v-model=\"test\" placeholder=\"请选择\" @change=\"_selectChange\"\u003e\n            \u003cel-option v-for=\"item in treeParams.data\" :key=\"item.testId\" :label=\"item.name\" :value=\"item.testId\"\u003e\u003c/el-option\u003e\n        \u003c/el-select\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\u003cstyle\u003e\n#app {\n    display: flex;\n    justify-content: space-between;\n    width: 600px;\n}\n\u003c/style\u003e\n\u003cscript\u003e\nexport default {\n    name: 'App',\n    data() {\n        return {\n            styles: {\n                width: '300px'\n            },\n            test: '',\n            values: ['11111'],\n            selectParams: {\n                multiple: true,\n                clearable: true,\n                placeholder: '请输入内容'\n            },\n            treeParams: {\n                clickParent: false,\n                filterable: true,\n                'check-strictly': true,\n                'default-expand-all': true,\n                'expand-on-click-node': false,\n                data: [],\n                props: {\n                    children: 'child',\n                    label: 'name',\n                    disabled: 'disabled',\n                    value: 'testId'\n                }\n            }\n        };\n    },\n    mounted() {\n        let data = [\n            {\n                testId: '1',\n                name: '节点1',\n                disabled: true,\n                child: [\n                    {\n                        testId: '11111',\n                        name: '子节点'\n                    }\n                ]\n            },\n            {\n                testId: '2',\n                name: '节点2',\n                child: [\n                    {\n                        testId: '222222',\n                        disabled: true,\n                        name: '子节点'\n                    }\n                ]\n            },\n            {\n                testId: '3',\n                name: '节点3'\n            },\n            {\n                testId: '4',\n                name: '节点4'\n            },\n            {\n                testId: '5',\n                name: '节点5'\n            },\n            {\n                testId: '6',\n                name: '节点6'\n            }\n        ];\n        this.treeParams.data = data;\n        this.$refs.treeSelect.treeDataUpdateFun(data);\n    },\n    methods: {\n        // 下拉框修改\n        _selectChange(val) {\n            console.log(val, '\u003c-select change');\n        },\n        // 树点击\n        _nodeClickFun(data, node, vm) {\n            console.log('this _nodeClickFun', this.values, data, node);\n        },\n        // 树过滤\n        _searchFun(value) {\n            console.log(value, '\u003c--_searchFun');\n            // 自行判断 是走后台查询，还是前端过滤\n            // this.$refs.treeSelect.$refs.tree.filter(value);\n            this.$refs.treeSelect.filterFun(value);\n            // 后台查询\n            // this.$refs.treeSelect.treeDataUpdateFun(treeData);\n        },\n        // 自定义render\n        _renderFun(h, { node, data, store }) {\n            return (\n                \u003cspan class='custom-tree-node'\u003e\n                    \u003cspan\u003e{node.label}\u003c/span\u003e\n                \u003c/span\u003e\n            );\n        }\n    },\n    components: { }\n};\n\u003c/script\u003e\n\n```\n\n## 安装\n\n```\nnpm install el-tree-select --save-dev\n```\n\n## git 地址\n\n```\nhttps://github.com/ayiaq1/el-tree-select\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayiaq1%2Fel-tree-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayiaq1%2Fel-tree-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayiaq1%2Fel-tree-select/lists"}