uni-app 可单选、全选树结构组件

前言

      由于产品需求，移动端开发非webview情况下没找到合适的树组件，面包屑的形式产品不满意，只能自己尝试动手写一个，由于时间紧迫和个人能力限制，组件还有不少待完善的地方，但是目前基本可以支持在项目中使用。

    组件也只开放出了一些常用的api和事件，更多如节点label选中事件、子节点全选后父节点自动选中效果都还没实现，不过基于现有的内容也都是有可能的，后面有时间会一一完善，也希望大家能够多给点意见共同完善。

    有需要的可以试着用一下，不喜欢的也可以下载看看有没有需要的东西。 个人认为组件还是要简单易上手为主，拿过来就能直接用，并且可以自己进行一些扩展是比较好的。自己也是找了很久没找到合适的，所以自己试着写了一个分享给大家，希望能够帮助一些遇到同样问题的同学吧。

xy-tree

ext.dcloud.net.cn/plugin?id=7…

组件介绍

本组件基于uniapp开发，示例项目可以在Hbuilder中直接运行。

声明：本组件开发使用了uview组件库的u-icon和u-checkbox组件，如需要更换组件库可自行修改。 本组件实现了pc端树组件的常用配置，支持子节点单选、父节点全选、展开/关闭、默认选中和默认打开参数、支持自定义数据源属性名和初始化及节点勾选事件。

组件使用

本组件为纯vue实现，页面内当做常规组件引入后即可使用。 import XyTree from 'xxx/xy-tree.vue'

<XyTree ref="xyTree" :treeData="treeData" :replaceFields="{ children: 'children', key: 'id', name: 'name' }" :defaultCheckedKeys="defaultCheckedKeys" :defaultOpenedKeys="defaultOpenedKeys" @cnecked="treeChecked" @afterTreeInit="afterTreeInit"></XyTree>

参数

参数	类型	说明
treeData	Array	可传入多层结构的树结构数据源
replaceFields	Object	替换节点fields属性值，默认为 { children:'children', key:'key', name:'name' }
defaultCheckedKeys	Array	默认选中节点数组，传入此数组可指定哪些节点默认选中。注意：如果传入的key包含父节点 则默认选中所有其子节点
defaultOpenedKeys	Array	默认打开节点数组，传入此数组可指定哪些节点默认打开。注意：如果传入子节点则其父节点自动展开

事件

名称	返回值	说明
afterTreeInit	function(treeList, checkedKeys)	树初始化完成后回调
cnecked	function(node, checked, checkedKeys)	树节点选中事件

注意

组件内部已经对treeData进行了监听，如果需要重置树节点数据直接改变传入的treeData就能实现，但要注意此时默认的defaultCheckedKeys和defaultOpenedKeys参数是否要同时改变。

如果只需要改变此时的defaultCheckedKeys或者defaultOpenedKeys，则需要结合ref和nextTick调用组件内的loadTree()方法。 例1：改变默认打开节点 ps:这里的默认值包含如'1-2-1'为三级节点节点，渲染时会自动打开其父节点和祖先节点

// defaultOpenedKeys: ['1-1', '1-1-1']
changeOpenedKeys () {
	this.defaultOpenedKeys = ['1-2-1', '2-1', '2-1-1']
	this.$nextTick(() => {
		this.$refs.xyTree.loadTree()
	})
}

例2：改变默认选中节点 ps:这里的默认值为['1', '2']包含一级节点，其子孙节点也都会被默认选中，在示例数据中就可以实现全选的效果

// defaultCheckedKeys: ['1', '2']
changeCheckedKeys () {
	this.defaultCheckedKeys = ['1-1-1', '2-1-1', '2-1-2', '2-2-1']
	this.$nextTick(() => {
		this.$refs.xyTree.loadTree()
	})
}