@mijs/vue-tree-select

TreeSelect 多级树选择

TreeSelect多级树选择主要用来解决海量数据下的渲染性能问题，目前已经支持以下特性：

• [x] 默认展开指定层级
• [x] 默认展开指定节点
• [x] 动态插入节点
• [x] 动态移除节点
• [x] 覆盖节点数据
• [x] 本地过滤
• [x] loading效果
• [x] 选中事件
• [x] 按需滚动渲染DOM

安装

npm install @mijs/vue-tree-select

使用

属性配置

名称	说明	类型	可选值	默认值
data	数据源，注意data需要处理为树形结构再传递给组件使用	Array	--	[]
loading	是否显示loading遮罩层	Boolean	--	false
height	当前组件高度	Boolean	--	false
itemHeight	节点的高度	Number	--	24
idKey	节点唯一key	String	--	id
labelKey	节点显示文本key	String	--	label
childrenKey	子级节点key	String	--	children
defaultExpandLevel	默认展开层级	Number	--	--
defaultExpandKeys	默认展开的节点key集合	Array	--	--
filterMethod	过滤方法，接受{node: Object, keyword: String}参数	Function	--	--
current	当前选中的key	String	--	--

方法

名称	说明	参数	返回值
insertNode	向指定节点末尾插入节点	data: 插入的节点数据，parentNode: 父及节点	--
removeNode	移除节点	nodeId：节点或节点id	--
filter	过滤数据	keyword：过滤的关键词	--

事件

名称	说明	参数
current	当前行改变触发时间	{ node: Object }

插槽

名称	说明	作用域
default	节点内容区域插槽，可覆盖节点文本	{ node: Object }
addon	节点右侧工具扩展区域插槽	{ node: Object }

node节点对象

名称	说明
id
level	节点层级
expanded	是否展开
parent	父级节点
data	节点的元素数据

注意事项

• 本组件主要解决海量数据下的性能问题，所以使用时必须指定固定的高度
• 目前组件提供的功能并不是很多，可以通过fock仓库进行扩展