@lllhys/lazy-cascader v0.1.3

@lllhys/lazy-cascader

fork于vueblocks/elp-cascader, 并添加了infinite scroll。

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

Demo

效果预览

install 安装

npm i @lllhys/lazy-cascader --save
# or
yarn add @lllhys/lazy-cascader

全局调用

在main.js中写入下面的代码

import '@lllhys/lazy-cascader/lib/lazy-cascader.css'
import LazyCascader from '@lllhys/lazy-cascader'
Vue.use(LazyCascader)

页面中直接使用

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

💡 与Element cascader的区别项

1. el-cascader当option重复时，会出一个空白节点

   解决逻辑：重复时保留老节点，舍去新节点

2. el-cascader多选状态下，第一个搜索词选中内容后，搜索词被清空

   解决逻辑：保留第一个搜索词

3. 支持infinite scroll下拉后加载新的分页数据

4. props中新增属性

5. 开启lazy无限滚动才会生效，lazyLoad函数修改，参数加入pageNo，回调数据变为{list: [], isEnd: Boolean}

6. Cascader、CascaderPanel 新增事件

CHANGELOG