Cat-Tree-Select 基于Vue+Element的树选择器

Posted 2023-02-06 究极死胖兽

Cat-Tree-Select 基于Vue+Element的树选择器

基于 Element 的Vue 组件(Vue.js 2.x)

cat-tree-select Github 地址

前言

本人在最近的开发工作中常需要用到树选择器 目前最好用的基于 Vue 的树选择器应该是 VueTreeselect ，但是由于个人倾向基于 Element 进行开发，而 VueTreeselect 的风格样式与 Element 不一致，且不能与 ElForm 和 ElFormItem 联动。所以本人参考了其他 Element 组件的源码，自行封装了一个树选择器 Cat-Tree-Select ，以追求与 Element 最好的兼容性。目前已经实现了单选，多选，自定义树节点，可搜索树节点等功能。

效果预览

Demo 安装

复制仓库

git clone [e-mail]:scuxiatian/cat-tree-select.git

安装依赖

npm install

demo预览

npm run serve

实例

单选树

<cat-tree-select  v-model="value"  :data="data"  :props="props"></cat-tree-select>

多选树

<cat-tree-select  v-model="value"  :data="data"  :props="props"  check-strictly  multiple></cat-tree-select>

自定义树节点

<cat-tree-select  v-model="value1"  :data="data"  :props="props"> 
	<template v-slot=" node, data ">
		<span> node.label </span> 
		<span style="margin-left: 20px; color: #8492a6; font-size: 13px">
			 data.value 
		</span> 
	</template>
</cat-tree-select>

可搜索树节点

<cat-tree-select  v-model="value1"  :data="data"  :props="props" 
	:filter-node-method="filterNode"  filterable>
</cat-tree-select>````

filterNode (value, data) 
	if (!value) return true  return data.label.indexOf(value) !== -1

Api 文档

TreeSelect Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值	boolean / string / number	—	—
multiple	是否多选	boolean	—	false
disabled	是否禁用	boolean	—	false
size	输入框尺寸	string	medium/small/mini	—
clearable	是否可以清空选项	boolean	—	false
collapse-tags	多选时是否将选中值按文字的形式展示	boolean	—	false
name	tree-select input 的 name 属性	string	—	—
placeholder	占位符	string	—	请选择
filterable	是否可搜索	boolean	—	false
placement	弹出框出现位置	String	top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end	bottom
props	配置选项，具体看下表	object	—	—
el-tree attributes	参考element-ui官网 el-tree attributes	—	—	—
### Props	参数	说明	类型	可选值

TreeSelect Events

事件类型	说明	回调参数
change	选中值发生变化时触发	目前的选中值
visible-change	下拉框出现/隐藏时触发	出现则为 true，隐藏则为 false
remove-tag	多选模式下移除tag时触发	移除的tag值
clear	可清空的单选模式下用户点击清空按钮时触发	—
blur	当 input 失去焦点时触发	(event: Event)
focus	当 input 获得焦点时触发	(event: Event)
el-tree events	参考element-ui官网 el-tree events	—

TreeSelect V-Slot

name	说明
-	自定义备选项的节点内容，参数为 node, data ，分别为当前节点的 Node 对象和数据

后记

本想实现树的懒加载功能的，但是没考虑好在有初始选项时如何处理更好，如果要显示初始选项的内容，需要遍历整棵树，那懒加载的意义就没了，如果不显示初始选项内容，那么用户无法知道已有初始选项，所以就暂时搁置了。