cascader-tree-select

cascader-tree-select based on element-ui，vite and vue-virtual-scroller, combined with virtual list rendering level by level, supports full selection, and has high performance in large data volumes。

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

参数	说明	类型	可选值	默认值
value	选中值	array	-	[]
options	可选数据源	array	-	[]
needResultPanel	是否需要结果面板	boolean	true/false	true
resultLabelJoiner	结果面板的选项名称拼接符	string	-	>
needSearch	是否需要前端搜索	boolean	true/false	true
placeholder	搜索框的占位文本	string	-	请输入关键词
size	搜索框的尺寸	string	medium / small / mini	small
cascaderMaxLevel	级联框的最大层级	number	-	2
panelTitleList	级联面板的标题	array	-	['一级', '二级', '三级', '四级']
ancestorHitShow	当前节点命中搜索词，它的子节点无论是否命中搜索词均展示	boolean	true/false	true

node字段

字段名称	说明	类型	可选值	默认值
uid	随机id	string	-	-
label	当前节点的名称	string	-	-
value	当前节点的值	string	-	-
level	当前节点的层级	number	-	-
leaf	是否是叶节点	boolean	true/false	false
disabled	是否被禁用	boolean	true/false	false
parent	当前节点的父节点	-	-	-
children	当前节点的子节点	-	-	-
path	当前节点所在的各级菜单的value所组成的数组	array	-	-
pathName	当前节点所在的各级菜单的label所组成的数组	array	-	-
leafNodesNum	当前节点的子节点数量	number	-	-
checked	当前节点是否被选中	boolean	true/false	false
indeterminate	当前节点是否有部门子节点被选中	boolean	true/false	false
menuNodeShow	当前节点是否展示	boolean	true/false	true
colorDangerField	该字段值存在，节点标红	string	-	-

events

事件名称	说明	回调参数
change	当选中节点变化时触发	选中节点的path组成的二维数组

Methods

方法名称	说明	参数
initMenuStore	重置到初始状态	可选数据源，已选中值