# @vueblocks/elp-cascader

> A vue component based on 'element-ui' and 'vue-virtual-scroller'

Latest version **0.2.1** (published 2023-06-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vueblocks/elp-cascader
pnpm add @vueblocks/elp-cascader
yarn add @vueblocks/elp-cascader
bun add @vueblocks/elp-cascader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2023-06-13 |
| First published | 2020-12-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 9.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18 |
| Maintainers | yys_jd, zimu_, lkccy |
| Keywords | vueblocks, cascader, vue, element, virtual-scroller |

## Links

- npm: https://www.npmjs.com/package/@vueblocks/elp-cascader
- Repository: https://github.com/vueblocks/elp-cascader
- Homepage: https://vueblocks.github.io/elp-cascader/
- Issues: https://github.com/vueblocks/elp-cascader/issues
- npm.io page: https://npm.io/package/@vueblocks/elp-cascader

## Dependencies (3)

- [element-ui](https://npm.io/package/element-ui.md) ^2.14.1
- [throttle-debounce](https://npm.io/package/throttle-debounce.md) ^1.0.1
- [vue-virtual-scroller](https://npm.io/package/vue-virtual-scroller.md) ^1.0.10

## Recent versions

- 0.2.1 (latest) — 2023-06-13
- 0.1.11-alpha.0 (alpha) — 2021-11-04
- 0.2.0 — 2023-06-12
- 0.1.11-alpha.1 — 2022-09-18
- 0.1.10 — 2021-09-26
- 0.1.9 — 2021-07-16
- 0.1.8 — 2021-06-30
- 0.1.7 — 2021-06-23
- 0.1.6 — 2021-06-10
- 0.1.5 — 2021-06-04
- 0.1.4 — 2021-01-11
- 0.1.3 — 2020-12-23
- 0.1.2 — 2020-12-22
- 0.1.1 — 2020-12-10

## README

<p align="center">
    <h3 align="center">elp-cascader</h3>
    <br>
    <p align="center">
        <a href="https://www.npmjs.com/package/@vueblocks/elp-cascader"><img src="https://img.shields.io/npm/v/@vueblocks/elp-cascader?maxAge=2592000"></a>
        <a href="https://www.npmjs.com/package/@vueblocks/elp-cascader"><img src="https://img.shields.io/npm/dt/@vueblocks/elp-cascader"></a>
        <a href="https://github.com/vueblocks/elp-cascader/stargazers"><img src="https://img.shields.io/github/stars/vueblocks/elp-cascader.svg"></a>
    </p>
    <p align="center">
       Cascader based on 'element-ui' and 'vue-virtual-scroller'<br>
    </p>
</p>

# @vueblocks/elp-cascader

> 基于`element-ui`和`vue-virtual-scroller`的级联选择器，用虚拟列表的方式逐级渲染列表。适用于数据量较大的场景。

[Demo](<https://vueblocks.github.io/elp-cascader/>)

## 效果预览

![elp-cascader](./demo.gif)

## 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
<template>
  <div id="app">
    <elp-cascader v-model="value" :options="options" />
    <elp-cascader-panel v-model="value" :options="options" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: '',
      options: [
        {
          value: 'test',
          label: '测试',
          children: []
        }]
    }
  }
}
</script>
```

**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)

---
_Source: https://npm.io/package/@vueblocks/elp-cascader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._