{"id":26800741,"url":"https://github.com/vueblocks/elp-cascader","last_synced_at":"2025-06-23T16:34:20.800Z","repository":{"id":46780635,"uuid":"320246895","full_name":"vueblocks/elp-cascader","owner":"vueblocks","description":"A vue component based on 'element-ui' and 'vue-virtual-scroller'","archived":false,"fork":false,"pushed_at":"2023-06-13T03:18:07.000Z","size":4835,"stargazers_count":17,"open_issues_count":4,"forks_count":5,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-23T00:14:46.414Z","etag":null,"topics":["cascader","element-pro","tree-select","virtual-scroller"],"latest_commit_sha":null,"homepage":"https://vueblocks.github.io/elp-cascader/","language":"JavaScript","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/vueblocks.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-10T11:10:14.000Z","updated_at":"2024-11-29T08:17:35.000Z","dependencies_parsed_at":"2022-09-02T11:01:35.142Z","dependency_job_id":null,"html_url":"https://github.com/vueblocks/elp-cascader","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueblocks%2Felp-cascader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueblocks%2Felp-cascader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueblocks%2Felp-cascader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueblocks%2Felp-cascader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vueblocks","download_url":"https://codeload.github.com/vueblocks/elp-cascader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250343957,"owners_count":21415041,"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":["cascader","element-pro","tree-select","virtual-scroller"],"created_at":"2025-03-29T20:18:38.768Z","updated_at":"2025-04-23T00:15:03.889Z","avatar_url":"https://github.com/vueblocks.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003ch3 align=\"center\"\u003eelp-cascader\u003c/h3\u003e\n    \u003cbr\u003e\n    \u003cp align=\"center\"\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@vueblocks/elp-cascader\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@vueblocks/elp-cascader?maxAge=2592000\"\u003e\u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@vueblocks/elp-cascader\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/@vueblocks/elp-cascader\"\u003e\u003c/a\u003e\n        \u003ca href=\"https://github.com/vueblocks/elp-cascader/stargazers\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/vueblocks/elp-cascader.svg\"\u003e\u003c/a\u003e\n    \u003c/p\u003e\n    \u003cp align=\"center\"\u003e\n       Cascader based on 'element-ui' and 'vue-virtual-scroller'\u003cbr\u003e\n    \u003c/p\u003e\n\u003c/p\u003e\n\n# @vueblocks/elp-cascader\n\n\u003e 基于`element-ui`和`vue-virtual-scroller`的级联选择器，用虚拟列表的方式逐级渲染列表。适用于数据量较大的场景。\n\n[Demo](\u003chttps://vueblocks.github.io/elp-cascader/\u003e)\n\n## 效果预览\n\n![elp-cascader](./demo.gif)\n\n## install 安装\n\n```shell\nnpm i @vueblocks/elp-cascader --save\n# or\nyarn add @vueblocks/elp-cascader\n```\n\n## 全局调用\n\n在main.js中写入下面的代码\n\n```javascript\nimport '@vueblocks/elp-cascader/lib/elp-cascader.css'\nimport ElpCascader from '@vueblocks/cascader'\nVue.use(ElpCascader)\n```\n\n页面中直接使用\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003celp-cascader v-model=\"value\" :options=\"options\" /\u003e\n    \u003celp-cascader-panel v-model=\"value\" :options=\"options\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data () {\n    return {\n      value: '',\n      options: [\n        {\n          value: 'test',\n          label: '测试',\n          children: []\n        }]\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n**Attributes、Events、Methods、Props**\n\n详见[ElementUI-Cascader](https://element.eleme.io/#/zh-CN/component/cascader)\n\n\n## 💡 与Element cascader的区别项\n\n1. el-cascader当option重复时，会出一个空白节点\n\n    解决逻辑：重复时保留老节点，舍去新节点\n    \n2. el-cascader多选状态下，第一个搜索词选中内容后，搜索词被清空\n\n    解决逻辑：保留第一个搜索词\n\n3. props中新增属性\n\n| 参数 | 说明 | 类型 | 可选值 | 默认值 |\n| --- | --- | --- | --- | --- |\n| selectWithExpand | 单选且checkStrictly为true时是否展开下一级 | boolean | - | false |\n| lazyMultiCheck | 多选且懒加载时取值 | boolean | - | false |\n| panelLabels | 面板标题 | Array | - | [] |\n| checkAll | 多选且checkStrictly为true时全选 | boolean | - | false |\n| panelSearch | 面板搜索 | boolean | - | false |\n| panelLabels | 面板搜索标题 | Array | - | [] |\n| panelPlaceholder | 面板搜索placeholder | Array | - | [] |\n| expandPanels | 默认展开面板数 | number | - | 0 |\n| emptyText | 无匹配数据时展示文案 | string | - | '暂无数据' |\n\n4. Cascader、CascaderPanel 新增事件\n\n| 参数 | 说明 | 回调参数\n| --- | --- | --- |\n| lazy-loaded | 惰性加载完毕后触发 | 选中节点的值 |\n\n[CHANGELOG](CHANGELOG.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvueblocks%2Felp-cascader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvueblocks%2Felp-cascader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvueblocks%2Felp-cascader/lists"}