cascader-tree-select v0.0.5

cascader-tree-select

基于element-ui和vue-virtual-scroller的全量级联树选择器，结合虚拟列表逐级渲染，支持全选，在较大数据量上也有较高的性能

全量数据前端搜索

搜索逻辑默认是如果当前节点包含搜索关键词，则它的子节点全部展示（如果仅仅想展示包含搜索关键词的选项可以设置ancestorHitShow为false）；如果当前节点不包含搜索关键词，但至少一个它的子节点包含搜索关键字，则当前节点展示

选中父节点，默认勾选全部子节点

各层级节点全选

第一级面板全选相当于所有节点全部选中，数万量级节点选中到页面渲染也能快速完成

快速安装使用

npm i cascader-tree-select --save
# or
yarn add cascader-tree-select

在main.js中引入, vue版本应在2.7以上

import CascaderTreeSelect from 'cascader-tree-select'
import 'cascader-tree-select/src/style.less';
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(CascaderTreeSelect)

请确保你的项目引入了'element-ui/lib/theme-chalk/index.css', 因为本组件依赖于 element-ui

在vue文件中直接使用

<template>
  <cascader-tree-select
    :panelTitleList="['一级标题', '二级标题', '三级标题', '四级标题']"
    :options="_mock.array"
    @change="handleChange"
  ></cascader-tree-select>
</template>

<script setup>
  import Mock from 'mockjs'
  
  const _mock = Mock.mock({
    'array|100': [
      {
        label: '@csentence(6)',
        value: '@increment()',
        'children|10': [
          {
            label: '@csentence(6)',
            value: '@increment()',
            'children|10': [
              {
                label: '@csentence(6)',
                value: '@increment()',
              }
            ]
          }
        ]
      }
    ]
  })
  const handleChange = (result) => {
    console.log(result)
  }
</script>

props

node字段

events

Methods