https://github.com/vueblocks/elp-cascader
A vue component based on 'element-ui' and 'vue-virtual-scroller'
https://github.com/vueblocks/elp-cascader
cascader element-pro tree-select virtual-scroller
Last synced: about 1 month ago
JSON representation
A vue component based on 'element-ui' and 'vue-virtual-scroller'
- Host: GitHub
- URL: https://github.com/vueblocks/elp-cascader
- Owner: vueblocks
- Created: 2020-12-10T11:10:14.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-06-13T03:18:07.000Z (almost 2 years ago)
- Last Synced: 2025-04-23T00:14:46.414Z (about 1 month ago)
- Topics: cascader, element-pro, tree-select, virtual-scroller
- Language: JavaScript
- Homepage: https://vueblocks.github.io/elp-cascader/
- Size: 4.61 MB
- Stars: 17
- Watchers: 5
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
elp-cascader
Cascader based on 'element-ui' and 'vue-virtual-scroller'
# @vueblocks/elp-cascader
> 基于`element-ui`和`vue-virtual-scroller`的级联选择器，用虚拟列表的方式逐级渲染列表。适用于数据量较大的场景。
[Demo]()
## 效果预览
## install 安装
```shell
npm i @vueblocks/elp-cascader --save
# or
yarn add @vueblocks/elp-cascader
```
## 全局调用
在main.js中写入下面的代码
```javascript
import '@vueblocks/elp-cascader/lib/elp-cascader.css'
import ElpCascader from '@vueblocks/cascader'
Vue.use(ElpCascader)
```
页面中直接使用
```html
export default {
data () {
return {
value: '',
options: [
{
value: 'test',
label: '测试',
children: []
}]
}
}
}
```
**Attributes、Events、Methods、Props**
详见[ElementUI-Cascader](https://element.eleme.io/#/zh-CN/component/cascader)
## 💡 与Element cascader的区别项
1. el-cascader当option重复时，会出一个空白节点
解决逻辑：重复时保留老节点，舍去新节点
2. el-cascader多选状态下，第一个搜索词选中内容后，搜索词被清空
解决逻辑：保留第一个搜索词
3. props中新增属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- |
| selectWithExpand | 单选且checkStrictly为true时是否展开下一级 | boolean | - | false |
| lazyMultiCheck | 多选且懒加载时取值 | boolean | - | false |
| panelLabels | 面板标题 | Array | - | [] |
| checkAll | 多选且checkStrictly为true时全选 | boolean | - | false |
| panelSearch | 面板搜索 | boolean | - | false |
| panelLabels | 面板搜索标题 | Array | - | [] |
| panelPlaceholder | 面板搜索placeholder | Array | - | [] |
| expandPanels | 默认展开面板数 | number | - | 0 |
| emptyText | 无匹配数据时展示文案 | string | - | '暂无数据' |
4. Cascader、CascaderPanel 新增事件
| 参数 | 说明 | 回调参数
| --- | --- | --- |
| lazy-loaded | 惰性加载完毕后触发 | 选中节点的值 |
[CHANGELOG](CHANGELOG.md)