# uni-app - 插件 - 树Tree

**Repository Path**: kevinmooo/ljs-treeChoose

## Basic Information

- **Project Name**: uni-app - 插件 - 树Tree
- **Description**: 【免费市场】uni-app，插件开发项目。
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-08-25
- **Last Updated**: 2024-08-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 方便您的同时，请五星、收藏，让好的东西照亮更多深渊中负重前行的代码人。
# 创作不易，在您方便之际，赞赏作者，我们会更有动力继续下去。

# 简介
树形结构选择器，单选，可选任一级。暂未开放多选后期增加。

# 演示
![Demo](./step.gif)

# 平台兼容性
全平台兼容。
# 快速开始
### 使用 uni_modules 安装（推荐）
使用 uni_modules 方式安装组件库，可以直接通过插件市场导入，通过右键菜单快速更新组件，不需要引用、注册，直接在页面中使用 ljs-treeChoose 组件。

### 主参数

参数  | 类型| 必填项 | 默认值 | 说明
---- | ----- | ------ | ------  | :------ 
data  | Array | √ | | 树（Tree）解构数据。
id | Array | × | | 树（Tree），需要回显的数据，id的数组。注意multiple值需与回显值匹配。
checkStrictly | Boolean | × | false | 是否严格的遵守父子节点不互相关联（true: 每一级都能选，false: 只能选最后一级）。
multiple | Boolean | × | false | 是否多选。
showAllLevels | Boolean | × | true | 是否返回完整路径数据集。
title  | String | × | | 选择器标题。
submitText | String | × | | 确定按钮文字。
cancelText | String | × | | 取消按钮文字。
chooseMode | String | × | line | 选择模式，默认line，勾选模式ico。

###### tree数据解析：

 参数  | 类型| 解释
 ---- | ----- | :------ 
 id | String| 节点ID。
 label | String| 节点名称。
 openTag | Boolean| 节点展开。
 choose | Boolean| 选择标记。
 
### 方法

 参数  | 类型| 解释
 ---- | ----- | :------ 
 @getChooseValue  | 回调函数 | （必填）function(ids, items)。ids: 集合；items: 节点对象集合。
 @close  | 回调函数 | （必填）function(val)。val: false。

### 快速应用
###### 官方示例
```
<template>
	<view class="content">
		<view class="title">单选(带数据回显)：</view>
		<ljs-treeChoose
			v-model="ljs_tree1.department"
			:ids="ljs_tree1.chooseIds"
			:props="ljs_tree1.props"
			@getChooseValue="ljs_tree1GetChooseValue">
		</ljs-treeChoose>
			
		<view class="title">多选，返回最后一级路径：</view>
		<ljs-treeChoose
			v-model="ljs_tree2.department"
			:ids="ljs_tree2.chooseIds"
			:multiple="ljs_tree2.multiple"
			:showAllLevels="ljs_tree2.showAllLevels"
			@getChooseValue="ljs_tree2GetChooseValue">
		</ljs-treeChoose>
			
		<view class="title">单选，任意级都可选：</view>
		<ljs-treeChoose
			v-model="ljs_tree3.department"
			:ids="ljs_tree3.chooseIds"
			:checkStrictly="ljs_tree3.checkStrictly"
			chooseMode="ico"
			@getChooseValue="ljs_tree3GetChooseValue">
		</ljs-treeChoose>
		<!-- <view @click="go()" class="but">nvue Dome</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ljs_tree1: {
					department: [],
					chooseIds: [100, 101, 103], // 选择tree的id数据结果集合
					props: { label: 'name', id: 'value', children: 'children' },
				},
				ljs_tree2: {
					departmentTag: false,
					department: [],
					multiple: true, // 是否多选
					showAllLevels: false, // 是否返回完整路径数据集
					chooseIds: [[103], [104]], // 选择tree的id数据结果集合
				},
				ljs_tree3: {
					departmentTag: false,
					department: [],
					departmentName: "",
					checkStrictly: true, // 任意级都可选
					chooseIds: [100, 101], // 选择tree的id数据结果集合
				}
			}
		},
		onLoad() {
			// 原始数据
			setTimeout(() => {
				this.ljs_tree1.department = [{"value":100,"name":"九山科技","type":null,"children":[{"value":101,"name":"深圳总公司","type":null,"children":[{"value":103,"name":"研发部门","disabled":true,"type":null,},{"value":104,"name":"市场部门","type":null,},{"value":105,"name":"测试部门","type":null,},{"value":106,"name":"财务部门","type":null,},{"value":107,"name":"运维部门","type":null,}],},{"value":102,"name":"长沙分公司","type":null,"children":[{"value":108,"name":"市场部门","type":null,},{"value":109,"name":"财务部门","type":null,}],},{"value":200,"name":"西安分公司","type":null,"children":[{"value":202,"name":"人事部","type":null,},{"value":201,"name":"研发部","type":null,}],}],}];
			}, 1000);
			// this.ljs_tree1.department = [{"value":100,"name":"九山科技","type":null,"children":[{"value":101,"name":"深圳总公司","type":null,"children":[{"value":103,"name":"研发部门","disabled":true,"type":null,},{"value":104,"name":"市场部门","type":null,},{"value":105,"name":"测试部门","type":null,},{"value":106,"name":"财务部门","type":null,},{"value":107,"name":"运维部门","type":null,}],},{"value":102,"name":"长沙分公司","type":null,"children":[{"value":108,"name":"市场部门","type":null,},{"value":109,"name":"财务部门","type":null,}],},{"value":200,"name":"西安分公司","type":null,"children":[{"value":202,"name":"人事部","type":null,},{"value":201,"name":"研发部","type":null,}],}],}];
			// 原始数据
			setTimeout(() => {
				this.ljs_tree2.department = [{"id":100,"label":"九山科技","disabled":false,"type":null,"children":[{"id":101,"label":"深圳总公司","disabled":false,"type":null,"children":[{"id":103,"label":"研发部门","disabled":false,"type":null},{"id":104,"label":"市场部门","disabled":false,"type":null},{"id":105,"label":"测试部门","disabled":false,"type":null},{"id":106,"label":"财务部门","disabled":false,"type":null},{"id":107,"label":"运维部门","disabled":false,"type":null}]},{"id":102,"label":"长沙分公司","disabled":false,"type":null,"children":[{"id":108,"label":"市场部门","disabled":false,"type":null},{"id":109,"label":"财务部门","disabled":false,"type":null}]},{"id":200,"label":"西安分公司","disabled":false,"type":null,"children":[{"id":202,"label":"人事部","disabled":false,"type":null},{"id":201,"label":"研发部","disabled":false,"type":null}]}]}];
			}, 3000);
			// this.ljs_tree2.department = [{"id":100,"label":"九山科技","disabled":false,"type":null,"children":[{"id":101,"label":"深圳总公司","disabled":false,"type":null,"children":[{"id":103,"label":"研发部门","disabled":false,"type":null},{"id":104,"label":"市场部门","disabled":false,"type":null},{"id":105,"label":"测试部门","disabled":false,"type":null},{"id":106,"label":"财务部门","disabled":false,"type":null},{"id":107,"label":"运维部门","disabled":false,"type":null}]},{"id":102,"label":"长沙分公司","disabled":false,"type":null,"children":[{"id":108,"label":"市场部门","disabled":false,"type":null},{"id":109,"label":"财务部门","disabled":false,"type":null}]},{"id":200,"label":"西安分公司","disabled":false,"type":null,"children":[{"id":202,"label":"人事部","disabled":false,"type":null},{"id":201,"label":"研发部","disabled":false,"type":null}]}]}];
			// 原始数据
			this.ljs_tree3.department = [{"id":100,"label":"九山科技","disabled":false,"type":null,"children":[{"id":101,"label":"深圳总公司","disabled":false,"type":null,"children":[{"id":103,"label":"研发部门","disabled":false,"type":null},{"id":104,"label":"市场部门","disabled":false,"type":null},{"id":105,"label":"测试部门","disabled":false,"type":null},{"id":106,"label":"财务部门","disabled":false,"type":null},{"id":107,"label":"运维部门","disabled":false,"type":null}]},{"id":102,"label":"长沙分公司","disabled":false,"type":null,"children":[{"id":108,"label":"市场部门","disabled":false,"type":null},{"id":109,"label":"财务部门","disabled":false,"type":null}]},{"id":200,"label":"西安分公司","disabled":false,"type":null,"children":[{"id":202,"label":"人事部","disabled":false,"type":null},{"id":201,"label":"研发部","disabled":false,"type":null}]}]}];
		},
		methods: {
			// 单选 - 获取
			// ids: 集合
			// items: 节点对象集合
			ljs_tree1GetChooseValue(ids, items){
				console.log(ids, items)
				this.ljs_tree1.chooseIds = ids;
			},
			
			// 多选 - 获取
			// ids: 集合
			// items: 节点对象集合
			ljs_tree2GetChooseValue(ids, items){
				console.log(ids, items)
				this.ljs_tree2.chooseIds = ids;
			},
			
			// 单选，任意级都可选 - 获取
			// ids: 集合
			// items: 节点对象集合
			ljs_tree3GetChooseValue(ids, items){
				console.log(ids, items)
				this.ljs_tree3.chooseIds = ids;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		padding: 30upx 30upx 0 30upx;
	}
</style>
```

# 贡献代码
龙九山。有任何问题，请在平台留言，在手头宽裕得情况下，我会尽快修复问题。
# 创作不易，在您方便之际，赞赏作者，我们会更有动力继续下去。
![赞赏作者，手有余香](./skm.jpg)