介绍

基于element-ui和vue-virtual-scroller实现的支持虚拟滚动的级联选择器(vue2)，主体样式和功能对齐OKee，支持大数据渲染场景，增加支持全选功能。

install

npm i vue-virtual-cascader --save
# or
yarn add vue-virtual-cascader

全局使用

import vueVirtualCascader from 'vue-virtual-cascader';
import 'vue-virtual-cascader/dist/vue-virtual-cascader.css';

Vue.use(vueVirtualCascader);

局部使用

<template>
  <div id="app">
    <VirtualCascader v-model="value" :props="props" :options="options" size="mini" collapse-tags filterable clearable />
  </div>
</template>
<script>
import Cascader from 'vue-virtual-cascader/dist/vue-virtual-cascader.umd.min.js';
import 'vue-virtual-cascader/dist/vue-virtual-cascader.css';
const { VirtualCascader } = Cascader;

export default {
  components: {
    VirtualCascader
  },
}
</script>

新增功能

除了Element带的功能和属性外，为了更好的扩展，新增支持一些插槽：

| 名称 | 说明 | | --- | --- | | prefix | 输入框头部内容 | | suffix | 输入框尾部内容 | | default | 自定义备选项的节点内容，参数为 { node, data }，分别为当前节点的 Node 对象和数据 |

说明

由于是基于element，所以很多参数也是以element为主，okee为辅（样式以okee为主），所以参数请参考element文档，常用样式说明如下：

| Okee中名称 | ele中名称 | 说明 | | --- | --- | --- | | multiple | props -> multiple | ele中多选时props中的参数，不是直接绑定在组件上 | | independent | props -> checkStrictly | ele中独立模式也是在props中，并且属性名有变化 |

主题定制

为了更好的扩展，组件主要样式使用css变量开发，暴露变量包括：

/* 组件主题色 */
--theme-color: #1251ff;
/* 组件边框颜色 */
--border-color: #e9e9ed;
/* 组件文本颜色 */
--txt-color: #323335;