guoyuepeng
/
qa-prevention-xgf-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
qa-prevention-xgf-app/uni_modules/next-tree/readme.md

44 KiB
Raw Permalink Blame History

next-tree --下拉树

遇到问题或有建议可以加入QQ群(455948571)反馈qQ ： 455-948-571 如果觉得组件不错，给五星鼓励鼓励咯！

亮点功能说明(打造你不得不用的好插件)

本插件自1.5.0版本后支持一下功能

1.大数据量渲染（本插件智能判断，如果子孙集数据量大于50时，会响应等待渲染视图；）
2.子节点按需渲染（自动启用，无需配置）
3.父子级联选择设置
4.单选多选设置
5.父节点是否可选设置
6.回显默认选中值
7.不可选项disabled设置
8.增强大数据量体验交互，增加筛选搜索模式
9.增强样式定制，提供自定义插槽，实现高要求样式定制
10.增加辅助线模式，外观更加精美
11.支持动态配置title
12.支持搜索模式searchModel=depHighlight模式，从属高亮显示模式
13.支持异步加载子节点，ajax加载子节点
14.增加可配置主题，自由定制插件主题颜色
15.支持动态校验，可以进行提示控制校验
16.支持页面模式/弹层模式，可以进行单页面展示或者弹层展示
17.支持半选提示状态显示
18.支持展开项expandedKeys配置
19.全面支持vue2/vue3
20.增加无子节点的父节点配置支持（当item[childrenKey]为null时，代表无子节点的父节点）
21.终极支持超数据量使用，增加展开模式配置单链路配置使用expandedMode=singe，使得ui组件使用进一步不在限制与数据量
22.功能模式再次增强，支持单选tree，多选tree，编辑tree，展示tree；

注意

作者不介意你对组件源码进行改造使用，为了开源更加高效，谢谢你的配合；为了节省不必要的沟通浪费，以下情况请不要再反馈给作者，请自行解决；

在这感各位的理解，我支持开源，但是作者时间有限；谢谢各位的配合；在这里期望我写的小小插件能为你提供便捷；

1.如果你对源码进行了修改使用，请不需要对作者做任何的反馈，作者确实没有空陪你做技术分析解答；
2.如果你引入插件，连插件是否有正常被uniapp框架识别解析都不清楚，请你换个插件使用；
3.如果你引入插件，针对自己项目进行功能改造的，请自行仔细阅读源码并了解其原理，自行改造；这里作者不愿意浪费过多时间进行技术解答；
4.如果你不想进行全局加载next-tree，需要按需加载；next-tree中有相关依赖的组件，需要你自行在组件内部单独引入；依赖组件可以在package.json中找到；
5.理论上作者不再解决由于本地开发环境问题所导致的插件使用问题，请自行到uniapp官网学习解决；

使用

超集功能即将不对外开源；

从uniapp插件市场导入

关注作者的动态

点击进入主页，关注作者

关注作者其他开源

npm开源包：npm; github开源项目：github;

<template>
	<view style="padding:10px;color: #333;font-weight: 500;">
		<view style="padding: 10px 0"><text>1、设置单选和父级不可选</text></view>
		<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(false, false)">设置</button>
		<view style="padding: 10px 0"><text>2、设置多选和父级不可选</text></view>
		<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(true, false)">设置</button>
		<view style="padding: 10px 0"><text>3、设置单选和父级可选</text></view>
		<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(false, true)">设置</button>
		<view style="padding: 10px 0"><text>4、设置多选和父级可选</text></view>
		<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(true, true)" >设置</button>
		<view style="padding: 10px 0"><text>4、设置多选和父级可选和父级关联子级选择</text></view>
		<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(true, true, true)" >设置</button>
		<view style="padding: 10px 0"><text>5、设置默认回显(默认选中: '上海-2', '黄埔区-35')</text></view>
		<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="echoDefault()" >设置</button>
		<!-- 异步加载demo -->
		<view style="padding: 10px 0"><text>6、异步加载渲染demo</text></view>
		<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="openTree()" >设置</button>
	</view>
	
	<!-- 异步加载demo -->
	<next-tree :selectParent="false" :checkStrictly="true" funcMode="checkbox" ref="nextTreeAsyncRef" :treeData="asyncTreeData" :loadData="loadData" />
	
	<next-tree :expandedKeys="['3','3-1']" :changeVerify="changeVerify" :title="getTitle" ref="nextTreeRef" :checkStrictly="checkStrictly" :selectParent="selectParent" :funcMode="funcMode" :treeData="treeData"  @cancel="oncancel" @confirm="onconfirm">
		<!-- label插槽示意代码 -->
		<!-- <template #label="{data: {id, label, iconSrc, prev, post}}">
			<view class="line-block">
				<image class="img" v-if="iconSrc" :src="iconSrc"></image>
				<text space="nbsp" v-if="prev">{{prev}}&nbsp;</text><text>{{label}}</text><text space="nbsp" v-if="post">&nbsp;{{post}}</text>
			</view>
		</template> -->
		<!-- <template #topBar>
			<view style="color: #666;padding:5px;"><text style="font-size: 12px;">历史记录</text></view>
			<view style="display: flex;justify-content: space-between;padding-bottom: 10px;border-bottom: 1rpx solid #f0f0f0;">
				<button @click="checkedFunc('1-3-3-4')"  :style="'background-color:'+ (activeId === '1-3-3-4' ? '#f9ae3d' : '#ccc') + ';color:#fff;margin: 5px'" size="mini">北京区-4</button>
				<button @click="checkedFunc('3-1-2')"  :style="'background-color:'+ (activeId === '3-1-2' ? '#f9ae3d' : '#ccc') + ';color:#fff;margin: 5px'" size="mini">海珠区-2</button>
				<button @click="checkedFunc('3-1-6')"  :style="'background-color:'+ (activeId === '3-1-6' ? '#f9ae3d' : '#ccc') + ';color:#fff;margin: 5px'" size="mini">海珠区-5</button>
			</view>
		</template> -->
	</next-tree>
</template>

vue3 + ts 使用

<script setup lang="ts">
import { ref, unref } from 'vue'
import nextTree from '@/components/next-tree/next-tree.vue'

const funcMode = ref('radio');
const selectParent = ref(false)
const nextTreeRef = ref()
const nextTreeAsyncRef = ref()
const activeId = ref('')

const localData: any = {
	'a1': [{id: 'a1-1', label: 'a1-1'}, {id: 'a1-2', label: 'a1-2',children: [] },{id: 'a1-3', label: 'a1-3'}],
	'b1': [{id: 'b1-1', label: 'b1-1',children: []}, {id: 'b1-2', label: 'b1-2'},{id: 'b1-3', label: 'b1-3'}],
	'c1': [{id: 'c1-1', label: 'c1-1'}, {id: 'c1-2', label: 'c1-2'},{id: 'c1-3', label: 'c1-3',children: []}],
	'a1-2': [{id: 'a1-2-1', label: 'a1-2-1'}, {id: 'a1-2-2', label: 'a1-2-2'}],
	'b1-1': [{id: 'b1-1-1', label: 'b1-1-1'}, {id: 'b1-1-2', label: 'b1-1-2'}],
	'c1-3': [{id: 'c1-3-1', label: 'c1-3-1'}, {id: 'c1-3-2', label: 'c1-3-2'}]
}

const checkStrictly = ref(false)
const asyncTreeData = ref([{id: 'a1', label: 'a1', children: []},{id: 'b1', label: 'b1', children: []},{id: 'c1', label: 'c1', children: []}])
const treeData = ref([
	{id: '1', label: '北京'},
	{id: '2', label: '上海', children: [
		{id: '2-1', label: '上海-1'},
		{id: '2-2', label: '上海-2'},
		{id: '2-3', label: '上海-3'},
	] },
	{id: '3', label: '广州', children: [
			{id: '3-1', label: '海珠区', children: [
				{id: '3-1-1', label: '海珠区-1'},
				{id: '3-1-2', label: '海珠区-2'},
				{id: '3-1-4', label: '海珠区-3'},
				{id: '3-1-5', label: '海珠区-4'},
				{id: '3-1-6', label: '海珠区-5'},
				{id: '3-1-7', label: '海珠区-6'},
				{id: '3-1-8', label: '海珠区-7'},
				{id: '3-1-9', label: '海珠区-8'},
				{id: '3-1-10', label: '海珠区-9'},
				{id: '3-1-11', label: '海珠区-10'},
			]},
			{id: '3-2', label: '番禺区', children: [
				{id: '3-2-1', label: '番禺区-1'},
				{id: '3-2-2', label: '番禺区-2'},
				{id: '3-2-4', label: '番禺区-3', children: null},	// 注意： 当childrenKey的值设为null，代表无子节点的父节点
				{id: '3-2-5', label: '番禺区-4'},
				{id: '3-2-6', label: '番禺区-5'},
				{id: '3-2-7', label: '番禺区-6'},
				{id: '3-2-8', label: '番禺区-7'},
				{id: '3-2-9', label: '番禺区-8'},
				{id: '3-2-10', label: '番禺区-9'},
				{id: '3-2-11', label: '番禺区-10'},
			]},
			{id: '3-3', label: '黄埔区', children: [
				{id: '3-3-1', label: '黄埔区-1'},
				{id: '3-3-2', label: '黄埔区-2'},
				{id: '3-3-3', label: '黄埔区-3'},
				{id: '3-3-4', label: '黄埔区-4'},
				{id: '3-3-5', label: '黄埔区-5'},
				{id: '3-3-6', label: '黄埔区-6'},
				{id: '3-3-7', label: '黄埔区-7'},
				{id: '3-3-8', label: '黄埔区-8'},
				{id: '3-3-9', label: '黄埔区-9'},
				{id: '3-3-10', label: '黄埔区-10'},
				{id: '3-3-12', label: '黄埔区-11'},
				{id: '3-3-13', label: '黄埔区-12'},
				{id: '3-3-13', label: '黄埔区-13'},
				{id: '3-3-14', label: '黄埔区-14'},
				{id: '3-3-15', label: '黄埔区-15'},
				{id: '3-3-16', label: '黄埔区-16'},
				{id: '3-3-17', label: '黄埔区-17'},
				{id: '3-3-18', label: '黄埔区-18'},
				{id: '3-3-19', label: '黄埔区-19'},
				{id: '3-3-20', label: '黄埔区-20'},
				{id: '3-3-21', label: '黄埔区-21'},
				{id: '3-3-22', label: '黄埔区-22'},
				{id: '3-3-23', label: '黄埔区-23'},
				{id: '3-3-24', label: '黄埔区-24'},
				{id: '3-3-25', label: '黄埔区-25'},
				{id: '3-3-26', label: '黄埔区-26'},
				{id: '3-3-27', label: '黄埔区-27'},
				{id: '3-3-28', label: '黄埔区-28'},
				{id: '3-3-29', label: '黄埔区-29'},
				{id: '3-3-30', label: '黄埔区-30'},
				{id: '3-3-31', label: '黄埔区-31'},
				{id: '3-3-32', label: '黄埔区-32'},
				{id: '3-3-33', label: '黄埔区-33'},
				{id: '3-3-34', label: '黄埔区-34'},
				{id: '3-3-35', label: '黄埔区-35'},
				{id: '3-3-36', label: '黄埔区-36'},
				
			]},
		],
	}])
function getTitle(checked) {
	return `已选：${checked.length}项`
}
function itemclick (_multiple, _selectParent, _checkStrictly = false) {
	funcMode.value = _multiple ? 'checkbox' : 'radio';
	selectParent.value = _selectParent
	checkStrictly.value = _checkStrictly
	unref(nextTreeRef).showTree = true
}
function checkedFunc(id) {
	if(unref(activeId) === id) {
		activeId.value = '';
		unref(nextTreeRef).checkedFunc(id, false)
	} else {
		activeId.value = id;
		unref(nextTreeRef).checkedFunc(id)	
	}
}
function changeVerify(current, chooseList) {
	// 注意：返回非空字符串会阻止原有行为，并提示返回的字符串
	// 如果函数体不做return返回值，即验证通过，控件正常处理业务
	console.log('当前变化的数据', current)
	console.log('已选择的数据', chooseList)
	if(chooseList && chooseList.length > 4) {
		
		return '最多可以选择4个节点'
	}
}
function openTree() {
	unref(nextTreeAsyncRef).showTree = true
}
function echoDefault () {
	const selectIds = ['2-1','3-3-35']
	checkedTreeData(unref(treeData), selectIds)
	console.log('treeData的数据：', unref(treeData))
	funcMode.value = 'checkbox'
	unref(nextTreeRef).showTree = true
}
function loadData(data) {
	const type = data.$type;	// 加载类型
	const source = data.source // 源数据
	// 同步实现的代码处理方式
	
	if (type === 'nodeLoad') {
		const  nodeItem = source;
		// 同步实现的代码处理方式
		// 如果期望子集节点中还存在孙子节点可以打开，请在初始化数据的时候，初始化个空数组的子节点配置值{[this.childrenKey]: []}
		
		// if(nodeItem && localData[nodeItem.id]) {
		// 	return localData[nodeItem.id]
		// } else {
		// 	return []
		// }
		
		// 异步的代码实现方式
		// 如果期望子集节点中还存在孙子节点可以打开，请在初始化数据的时候，初始化个空数组的子节点配置值{[this.childrenKey]: []}
		
		return new Promise((resolve, reject) => {
			setTimeout(() => {
				if(nodeItem && localData[nodeItem.id]) {
					return resolve(localData[nodeItem.id])
				} else {
					return resolve([])
				}
			}, 1000)
		})
	} else if(type === 'remoteSearch') { // searchModel=remote的时候，会在loadData函数中返回type参数供做业务处理
		// ...doing
	}
	
}

function checkedTreeData (treeData, selectIds) {
	treeData.map(item => {
		if (selectIds.indexOf(item.id) !== -1) {
			item.checked = true
		} else {
			item.checked = false
		}
		if (item.children && item.children.length) {
			checkedTreeData(item.children, selectIds)
		}
	})
}
function oncancel() {
	// 清除treeData的选中状态
	checkedTreeData(unref(treeData), [])
}
function onconfirm(list) {
	console.log('选中项的数量列表list：', list)
}
</script>
<style lang="scss">
	.line-block {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		.img {
			width: 40rpx;
			height: 40rpx;
			border-radius: 10rpx;
			margin: 0 20rpx;
		}
	}
</style>

vue2 使用

<template>
	<view>
		<view style="padding:10px;color: #333;font-weight: 500;">
			<view style="padding: 10px 0"><text>1、设置单选和父级不可选</text></view>
			<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(false, false)">设置</button>
			<view style="padding: 10px 0"><text>2、设置多选和父级不可选</text></view>
			<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(true, false)">设置</button>
			<view style="padding: 10px 0"><text>3、设置单选和父级可选</text></view>
			<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(false, true)">设置</button>
			<view style="padding: 10px 0"><text>4、设置多选和父级可选</text></view>
			<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(true, true)" >设置</button>
			<view style="padding: 10px 0"><text>4、设置多选和父级可选和父级关联子级选择</text></view>
			<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="itemclick(true, true, true)" >设置</button>
			<view style="padding: 10px 0"><text>5、设置默认回显(默认选中: '上海-2', '黄埔区-35')</text></view>
			<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="echoDefault()" >设置</button>
			<!-- 异步加载demo -->
			<view style="padding: 10px 0"><text>6、异步加载渲染demo</text></view>
			<button style="width: 100%;background-color: #f9ae3d;color:#fff" size="mini" @click="openTree()" >设置</button>
		</view>
		<!-- 异步加载demo -->
		<next-tree :selectParent="false" :checkStrictly="true" funcMode="checkbox" ref="nextTreeAsyncRef" :treeData="asyncTreeData" :loadData="loadData" />
		
		<next-tree :expandedKeys="['3','3-1']" :changeVerify="changeVerify" :title="getTitle" ref="nextTreeRef" :checkStrictly="checkStrictly" :selectParent="selectParent" :funcMode="funcMode" :treeData="treeData" @cancel="oncancel" @confirm="onconfirm">
			<!-- label插槽示意代码 -->
			<!-- <template v-slot:label="{data}">
				<view class="line-block">
					<image class="img" v-if="data.iconSrc" :src="data.iconSrc"></image>
					<text space="nbsp" v-if="data.prev">{{data.prev}}&nbsp;</text><text>{{data.label}}</text><text space="nbsp" v-if="data.post">&nbsp;{{data.post}}</text>
				</view>
			</template> -->
			<!-- <template #topBar>
				<view style="color: #666;padding:5px;"><text style="font-size: 12px;">历史记录</text></view>
				<view style="display: flex;justify-content: space-between;padding-bottom: 10px;border-bottom: 1rpx solid #f0f0f0;">
					<button @click="checkedFunc('1-3-3-4')"  :style="'background-color:'+ (activeId === '1-3-3-4' ? '#f9ae3d' : '#ccc') + ';color:#fff;margin: 5px'" size="mini">北京区-4</button>
					<button @click="checkedFunc('3-1-2')"  :style="'background-color:'+ (activeId === '3-1-2' ? '#f9ae3d' : '#ccc') + ';color:#fff;margin: 5px'" size="mini">海珠区-2</button>
					<button @click="checkedFunc('3-1-6')"  :style="'background-color:'+ (activeId === '3-1-6' ? '#f9ae3d' : '#ccc') + ';color:#fff;margin: 5px'" size="mini">海珠区-5</button>
				</view>
			</template> -->
		</next-tree>
	</view>
</template>

<script>
let self = null;
export default {
	data () {
		return {
			funcMode: 'radio',
			selectParent: false,
			checkStrictly: false,
			activeId: '',
			localData:{
				'a1': [{id: 'a1-1', label: 'a1-1'}, {id: 'a1-2', label: 'a1-2',children: [] },{id: 'a1-3', label: 'a1-3'}],
				'b1': [{id: 'b1-1', label: 'b1-1',children: []}, {id: 'b1-2', label: 'b1-2'},{id: 'b1-3', label: 'b1-3'}],
				'c1': [{id: 'c1-1', label: 'c1-1'}, {id: 'c1-2', label: 'c1-2'},{id: 'c1-3', label: 'c1-3',children: []}],
				'a1-2': [{id: 'a1-2-1', label: 'a1-2-1'}, {id: 'a1-2-2', label: 'a1-2-2'}],
				'b1-1': [{id: 'b1-1-1', label: 'b1-1-1'}, {id: 'b1-1-2', label: 'b1-1-2'}],
				'c1-3': [{id: 'c1-3-1', label: 'c1-3-1'}, {id: 'c1-3-2', label: 'c1-3-2'}]
			},
			asyncTreeData: [{id: 'a1', label: 'a1', children: []},{id: 'b1', label: 'b1', children: []},{id: 'c1', label: 'c1', children: []}],		
			treeData: [
				{id: '1', label: '北京', checked: false},
				{id: '2', label: '上海', checked: false, children: [
					{id: '2-1', label: '上海-1', checked: false},
					{id: '2-2', label: '上海-2', checked: false},
					{id: '2-3', label: '上海-3', checked: false},
				] },
				{id: '3', label: '广州', children: [
						{id: '3-1', label: '海珠区', checked: false, children: [
							{id: '3-1-1', label: '海珠区-1', checked: false, disabled: true},
							{id: '3-1-2', label: '海珠区-2', checked: false},
							{id: '3-1-4', label: '海珠区-3', checked: false},
							{id: '3-1-5', label: '海珠区-4', checked: false},
							{id: '3-1-6', label: '海珠区-5', checked: false},
							{id: '3-1-7', label: '海珠区-6', checked: false},
							{id: '3-1-8', label: '海珠区-7', checked: false},
							{id: '3-1-9', label: '海珠区-8', checked: false},
							{id: '3-1-10', label: '海珠区-9', checked: false},
							{id: '3-1-11', label: '海珠区-10', checked: false},
						]},
						{id: '3-2', label: '番禺区', checked: false, children: [
							{id: '3-2-1', label: '番禺区-1', checked: false},
							{id: '3-2-2', label: '番禺区-2', checked: false},
							{id: '3-2-4', label: '番禺区-3', checked: false},
							{id: '3-2-5', label: '番禺区-4', checked: false},
							{id: '3-2-6', label: '番禺区-5', checked: false},
							{id: '3-2-7', label: '番禺区-6', checked: false},
							{id: '3-2-8', label: '番禺区-7', checked: false},
							{id: '3-2-9', label: '番禺区-8', checked: false},
							{id: '3-2-10', label: '番禺区-9', checked: false},
							{id: '3-2-11', label: '番禺区-10', checked: false},
						]},
						{id: '3-3', label: '黄埔区', checked: false, children: [
							{id: '3-3-1', label: '黄埔区-1', checked: false},
							{id: '3-3-2', label: '黄埔区-2', checked: false},
							{id: '3-3-3', label: '黄埔区-3', checked: false},
							{id: '3-3-4', label: '黄埔区-4', checked: false},
							{id: '3-3-5', label: '黄埔区-5', checked: false},
							{id: '3-3-6', label: '黄埔区-6', checked: false},
							{id: '3-3-7', label: '黄埔区-7', checked: false},
							{id: '3-3-8', label: '黄埔区-8', checked: false},
							{id: '3-3-9', label: '黄埔区-9', checked: false},
							{id: '3-3-10', label: '黄埔区-10', checked: false},
							{id: '3-3-12', label: '黄埔区-11', checked: false},
							{id: '3-3-13', label: '黄埔区-12', checked: false},
							{id: '3-3-13', label: '黄埔区-13', checked: false},
							{id: '3-3-14', label: '黄埔区-14', checked: false},
							{id: '3-3-15', label: '黄埔区-15', checked: false},
							{id: '3-3-16', label: '黄埔区-16', checked: false},
							{id: '3-3-17', label: '黄埔区-17', checked: false},
							{id: '3-3-18', label: '黄埔区-18', checked: false},
							{id: '3-3-19', label: '黄埔区-19', checked: false},
							{id: '3-3-20', label: '黄埔区-20', checked: false},
							{id: '3-3-21', label: '黄埔区-21', checked: false},
							{id: '3-3-22', label: '黄埔区-22', checked: false},
							{id: '3-3-23', label: '黄埔区-23', checked: false},
							{id: '3-3-24', label: '黄埔区-24', checked: false},
							{id: '3-3-25', label: '黄埔区-25', checked: false},
							{id: '3-3-26', label: '黄埔区-26', checked: false},
							{id: '3-3-27', label: '黄埔区-27', checked: false},
							{id: '3-3-28', label: '黄埔区-28', checked: false},
							{id: '3-3-29', label: '黄埔区-29', checked: false},
							{id: '3-3-30', label: '黄埔区-30', checked: false},
							{id: '3-3-31', label: '黄埔区-31', checked: false},
							{id: '3-3-32', label: '黄埔区-32', checked: false},
							{id: '3-3-33', label: '黄埔区-33', checked: false},
							{id: '3-3-34', label: '黄埔区-34', checked: false},
							{id: '3-3-35', label: '黄埔区-35', checked: false},
							{id: '3-3-36', label: '黄埔区-36', checked: false},					
						]},
					],
				}]
		}
	},
	methods: {
		openTree: function() {
			this.$refs.nextTreeAsyncRef.showTree = true
		},
		changeVerify: function(current, chooseList) {
			// 注意：返回非空字符串会阻止原有行为，并提示返回的字符串
			// 如果函数体不做return返回值，即验证通过，控件正常处理业务
			console.log('当前变化的数据', current)
			console.log('已选择的数据', chooseList)
			if(chooseList && chooseList.length > 4) {
				
				return '最多可以选择4个节点'
			}
		},
		checkedFunc: function(id) {
			if(this.activeId === id) {
				this.activeId = '';
				this.$refs.nextTreeRef.checkedFunc(id, false)
			} else {
				this.activeId = id;
				this.$refs.nextTreeRef.checkedFunc(id)	
			}
		},
		function loadData(data) {
			const type = data.$type;	// 加载类型
			const source = data.source // 源数据
			// 同步实现的代码处理方式
			
			if (type === 'nodeLoad') {
				const  nodeItem = source;
				// 同步实现的代码处理方式 可以返回单个子节点的集合也可以返回子孙节点的集合
				// 如果期望子集节点中还存在孙子节点可以打开，请在初始化数据的时候，初始化个空数组的子节点配置值{[this.childrenKey]: []}
				
				// if(nodeItem && this.localData[nodeItem.id]) {
				// 	return this.localData[nodeItem.id]
				// } else {
				// 	return []
				// }
				// 异步的代码实现方式 可以返回单个子节点的集合也可以返回子孙节点的集合
				// 如果期望子集节点中还存在孙子节点可以打开，请在初始化数据的时候，初始化个空数组的子节点配置值{[this.childrenKey]: []}
				return new Promise((resolve, reject) => {
					setTimeout(() => {
						if(nodeItem && self.localData[nodeItem.id]) {
							return resolve(self.localData[nodeItem.id])
						} else {
							return resolve([])
						}
					}, 1000)
				})	
			} else if(type === 'remoteSearch') { // searchModel=remote的时候，会在loadData函数中返回type参数供做业务处理
				// ...doing
			}
			
		},
		
		getTitle: function(checked) {
			return `已选：${checked.length}项`
		},
		echoDefault: function() {
			const selectIds = ['2-1','3-3-35']
			this.checkedTreeData(this.treeData, selectIds)
			console.log('treeData的数据：', this.treeData)
			this.funcMode = 'checkbox'
			this.$refs.nextTreeRef.showTree = true
		},
		itemclick: function(_multiple, _selectParent, _checkStrictly = false) {
			this.funcMode = _multiple ? 'checkbox' : 'radio'
			this.selectParent = _selectParent
			this.checkStrictly = _checkStrictly
			this.$refs.nextTreeRef.showTree = true
		},
		checkedTreeData: function(treeData, selectIds) {
			// 注意 vue2当数据深嵌套时，如果没有在treeData里面初始化checked属性，那在改变数据的时候直接将checked属性赋值为true，这时候ui界面有可能不会更新，
			// 这时候建议使用this.$set去更新checked属性值，或者在初始化this.treeData的时候初始化checked属性
			(treeData || []).map(item => {
				if (selectIds.indexOf(item.id) !== -1) {
					item.checked = true
				} else {
					item.checked = false
				}
				if (item.children && item.children.length) {
					this.checkedTreeData(item.children, selectIds)
				}
			})
		},
		onconfirm: function(list) {
			console.log('选中项的数量列表list：', list)
		},
		oncancel: function() {
			// 清除treeData的选中状态
			this.checkedTreeData(this.treeData, [])
		}
	},
	created() {
		self = this
	}
}
</script>
<style lang="scss">
	.line-block {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		.img {
			width: 40rpx;
			height: 40rpx;
			border-radius: 10rpx;
			margin: 0 20rpx;
		}
	}
</style>

个性化自定义样式渲染

如果你的需求对样式需求比较高，请使用插槽模式渲染，本组件提供label插槽供你自定义定制；

<script>
// 提供参考一组自定义渲染数据demo，treeData如下；
const treeData = [
	{id: '1', label: '北京', prev: 'PonderNext-', iconSrc: 'https://img95.699pic.com/xsj/03/fg/hj.jpg%21/fh/300', children: [
		{id: '1-3-3-1', label: '北京区-1', prev: '前置-'},
		{id: '1-3-3-2', label: '北京区-2', post: '-后置'},
		{id: '1-3-3-3', label: '北京区-3', post: '-后置', prev: '前置-'},
		{id: '1-3-3-4', label: '北京区-4'},
		{id: '1-3-3-5', label: '北京区-5'},
		{id: '1-3-3-6', label: '北京区-6'},
		{id: '1-3-3-7', label: '北京区-7'},
		{id: '1-3-3-8', label: '北京区-8'},
		{id: '1-3-3-9', label: '北京区-9'},
		{id: '1-3-3-10', label: '北京区-10'},
		{id: '1-3-3-12', label: '北京区-11'},
		{id: '1-3-3-13', label: '北京区-12'},
		{id: '1-3-3-13', label: '北京区-13'},
		{id: '1-3-3-14', label: '北京区-14'},
		{id: '1-3-3-15', label: '北京区-15'},
		{id: '1-3-3-16', label: '北京区-16'},
		{id: '1-3-3-17', label: '北京区-17'},
		{id: '1-3-3-18', label: '北京区-18'},
		{id: '1-3-3-19', label: '北京区-19'},
		{id: '1-3-3-20', label: '北京区-20'},
		{id: '1-3-3-21', label: '北京区-21'},
		{id: '1-3-3-22', label: '北京区-22'},
		{id: '1-3-3-23', label: '北京区-23'},
		{id: '1-3-3-24', label: '北京区-24'},
		{id: '1-3-3-25', label: '北京区-25'},
		{id: '1-3-3-26', label: '北京区-26'},
		{id: '1-3-3-27', label: '北京区-27'},
		{id: '1-3-3-28', label: '北京区-28'},
		{id: '1-3-3-29', label: '北京区-29'},
		{id: '1-1-3-3-30', label: '北京区-30'},
		{id: '1-3-3-31', label: '北京区-31'},
		{id: '1-3-3-32', label: '北京区-32'},
		{id: '1-3-3-33', label: '北京区-33'},
		{id: '1-3-3-34', label: '北京区-34'},
		{id: '1-3-3-35', label: '北京区-35'},
		{id: '1-3-3-36', label: '北京区-36'},
		{id: '1-3-3-37', label: '北京区-37'},
		{id: '1-3-3-38', label: '北京区-38'},
		{id: '1-3-3-39', label: '北京区-39'},
		{id: '1-3-3-40', label: '北京区-40'},
		{id: '1-3-3-41', label: '北京区-41'},
		{id: '1-3-3-42', label: '北京区-42'},
		{id: '1-3-3-43', label: '北京区-43'},
		{id: '1-3-3-44', label: '北京区-44'},
		{id: '1-3-3-45', label: '北京区-45'},
		{id: '1-3-3-46', label: '北京区-46'},
		{id: '1-3-3-47', label: '北京区-47'},
		{id: '1-3-3-48', label: '北京区-48'},
		{id: '1-3-3-49', label: '北京区-49'},
		{id: '1-3-3-50', label: '北京区-50'},
		{id: '1-3-3-51', label: '北京区-51'},
		{id: '1-3-3-52', label: '北京区-52'},
		{id: '1-3-3-53', label: '北京区-53'},
		{id: '1-3-3-54', label: '北京区-54'},
	]},
	{id: '2', label: '上海', prev: 'PonderNext-',  iconSrc: 'https://img95.699pic.com/xsj/0g/hb/tc.jpg%21/fh/300', children: [
		{id: '2-1', label: '上海-1', iconSrc: 'https://img1.baidu.com/it/u=1997340124,765201109&fm=253&fmt=auto&app=120&f=JPEG?w=285&h=285'},
		{id: '2-2', label: '上海-2', iconSrc: 'https://img1.baidu.com/it/u=1997340124,765201109&fm=253&fmt=auto&app=120&f=JPEG?w=285&h=285'},
		{id: '2-3', label: '上海-3', iconSrc: 'https://img1.baidu.com/it/u=1997340124,765201109&fm=253&fmt=auto&app=120&f=JPEG?w=285&h=285'},
	] },
	{id: '3', label: '广州', prev: 'PonderNext-', iconSrc: 'https://storage-public.zhaopin.cn/user/avatar/1589350028141684980/d00a1afa-e3ec-40a5-a68e-aef1f684b189.jpg', children: [
			{id: '3-1', label: '海珠区', iconSrc: 'https://img95.699pic.com/xsj/0u/f3/5h.jpg%21/fh/300', children: [
				{id: '3-1-1', label: '海珠区-1', disabled: true},
				{id: '3-1-2', label: '海珠区-2', post: '-后置', prev: '前置-'},
				{id: '3-1-4', label: '海珠区-3', post: '-后置',},
				{id: '3-1-5', label: '海珠区-4', children: [
						{ id: '3-1-5-1', label: '海珠区-4-200号'},
						{ id: '3-1-5-2', label: '海珠区-4-201号', children: [
							{ id: '3-1-5-1-1', label: '海珠区-4-200号-2'},
							{ id: '3-1-5-2-1', label: '海珠区-4-201号-3'},
						]},
				]},
				{id: '3-1-6', label: '海珠区-5'},
				{id: '3-1-7', label: '海珠区-6'},
				{id: '3-1-8', label: '海珠区-7', post: '-后置',},
				{id: '3-1-9', label: '海珠区-8'},
				{id: '3-1-10', label: '海珠区-9'},
				{id: '3-1-11', label: '海珠区-10'},
				{id: '3-1-1', label: '海珠区-11', disabled: true},
				{id: '3-1-2', label: '海珠区-12'},
				{id: '3-1-4', label: '海珠区-13'},
				{id: '3-1-5', label: '海珠区-14'},
				{id: '3-1-6', label: '海珠区-15'},
				{id: '3-1-7', label: '海珠区-16'},
				{id: '3-1-8', label: '海珠区-17'},
				{id: '3-1-9', label: '海珠区-18'},
				{id: '3-1-10', label: '海珠区-19', prev: '前置-'},
				{id: '3-1-11', label: '海珠区-20'},
				{id: '3-1-1', label: '海珠区-21', disabled: true},
				{id: '3-1-2', label: '海珠区-22'},
				{id: '3-1-4', label: '海珠区-23'},
				{id: '3-1-5', label: '海珠区-24'},
				{id: '3-1-6', label: '海珠区-25'},
				{id: '3-1-7', label: '海珠区-26'},
				{id: '3-1-8', label: '海珠区-27'},
				{id: '3-1-9', label: '海珠区-28'},
				{id: '3-1-10', label: '海珠区-29'},
				{id: '3-1-11', label: '海珠区-30'},
				{id: '3-1-1', label: '海珠区-31', disabled: true},
				{id: '3-1-2', label: '海珠区-32'},
				{id: '3-1-4', label: '海珠区-33'},
				{id: '3-1-5', label: '海珠区-34'},
				{id: '3-1-6', label: '海珠区-35'},
				{id: '3-1-7', label: '海珠区-36'},
				{id: '3-1-8', label: '海珠区-37'},
				{id: '3-1-9', label: '海珠区-38'},
				{id: '3-1-10', label: '海珠区-39'},
				{id: '3-1-11', label: '海珠区-40'},
				{id: '3-1-1', label: '海珠区-41', disabled: true},
				{id: '3-1-2', label: '海珠区-42'},
				{id: '3-1-4', label: '海珠区-43'},
				{id: '3-1-5', label: '海珠区-44'},
				{id: '3-1-6', label: '海珠区-45'},
				{id: '3-1-7', label: '海珠区-46'},
				{id: '3-1-8', label: '海珠区-47'},
				{id: '3-1-9', label: '海珠区-48'},
				{id: '3-1-10', label: '海珠区-49'},
				{id: '3-1-11', label: '海珠区-50'},
				{id: '3-1-11', label: '海珠区-51'},
			]},
			{id: '3-2', label: '番禺区', iconSrc: 'https://img1.baidu.com/it/u=931648192,3196263841&fm=253&fmt=auto&app=120&f=JPEG?w=285&h=285', disabled: true, checked: true, children: [
				{id: '3-2-1', label: '番禺区-1'},
				{id: '3-2-2', label: '番禺区-2'},
				{id: '3-2-4', label: '番禺区-3'},
				{id: '3-2-5', label: '番禺区-4'},
				{id: '3-2-6', label: '番禺区-5'},
				{id: '3-2-7', label: '番禺区-6'},
				{id: '3-2-8', label: '番禺区-7'},
				{id: '3-2-9', label: '番禺区-8'},
				{id: '3-2-10', label: '番禺区-9'},
				{id: '3-2-11', label: '番禺区-10'},
			]},
			{id: '3-3', label: '黄埔区', iconSrc: 'https://img.jiaoyubao.cn/43423/20210423113959473-20210423114005024.jpeg', children: [
				{id: '3-3-1', label: '黄埔区-1'},
				{id: '3-3-2', label: '黄埔区-2'},
				{id: '3-3-3', label: '黄埔区-3'},
				{id: '3-3-4', label: '黄埔区-4'},
				{id: '3-3-5', label: '黄埔区-5'},
				{id: '3-3-6', label: '黄埔区-6'},
				{id: '3-3-7', label: '黄埔区-7'},
				{id: '3-3-8', label: '黄埔区-8'},
				{id: '3-3-9', label: '黄埔区-9'},
				{id: '3-3-10', label: '黄埔区-10'},
				{id: '3-3-12', label: '黄埔区-11'},
				{id: '3-3-13', label: '黄埔区-12'},
				{id: '3-3-13', label: '黄埔区-13'},
				{id: '3-3-14', label: '黄埔区-14'},
				{id: '3-3-15', label: '黄埔区-15'},
				{id: '3-3-16', label: '黄埔区-16'},
				{id: '3-3-17', label: '黄埔区-17'},
				{id: '3-3-18', label: '黄埔区-18'},
				{id: '3-3-19', label: '黄埔区-19'},
				{id: '3-3-20', label: '黄埔区-20'},
				{id: '3-3-21', label: '黄埔区-21'},
				{id: '3-3-22', label: '黄埔区-22'},
				{id: '3-3-23', label: '黄埔区-23'},
				{id: '3-3-24', label: '黄埔区-24'},
				{id: '3-3-25', label: '黄埔区-25'},
				{id: '3-3-26', label: '黄埔区-26'},
				{id: '3-3-27', label: '黄埔区-27'},
				{id: '3-3-28', label: '黄埔区-28'},
				{id: '3-3-29', label: '黄埔区-29'},
				{id: '3-3-30', label: '黄埔区-30'},
				{id: '3-3-31', label: '黄埔区-31'},
				{id: '3-3-32', label: '黄埔区-32'},
				{id: '3-3-33', label: '黄埔区-33'},
				{id: '3-3-34', label: '黄埔区-34'},
				{id: '3-3-35', label: '黄埔区-35'},
				{id: '3-3-36', label: '黄埔区-36'},
				{id: '3-3-37', label: '黄埔区-37'},
				{id: '3-3-38', label: '黄埔区-38'},
				{id: '3-3-39', label: '黄埔区-39'},
				{id: '3-3-40', label: '黄埔区-40'},
				{id: '3-3-41', label: '黄埔区-41'},
				{id: '3-3-42', label: '黄埔区-42'},
				{id: '3-3-43', label: '黄埔区-43'},
				{id: '3-3-44', label: '黄埔区-44'},
				{id: '3-3-45', label: '黄埔区-45'},
				{id: '3-3-46', label: '黄埔区-46'},
				{id: '3-3-47', label: '黄埔区-47'},
				{id: '3-3-48', label: '黄埔区-48'},
				{id: '3-3-49', label: '黄埔区-49'},
				{id: '3-3-50', label: '黄埔区-50'},
				{id: '3-3-51', label: '黄埔区-51'},
				{id: '3-3-52', label: '黄埔区-52'},
				{id: '3-3-53', label: '黄埔区-53'},
				{id: '3-3-54', label: '黄埔区-54'},		
			]},
		],
	}]
</script>

预览

功能预览 父子级关联演示 全面支持大数据量，子孙节点ui按需渲染(按需渲染数据)
增强控件交互能力，增加筛选search模式，全面支持大数据量交互 超强的样式定制能力，满足你高精美组件的需求 打开精美的辅助线模式，让你的控件更加友好
增加搜索模式searchModel=depHighlight模式，从属高亮显示模式 支持异步加载子节点，子树集，ajax远程加载数据等 支持不同主题的切换，ui定制更简单
增加验证函数和topBar插槽使得更加容易和组件进行交互 增加页面模式，支持整页ui展示模式 增加展开模式expandedMode配置，支持单链路展开，理论上支持几万数据量

超集功能预览(增值功能)

实现tree的功能模式扩展，让你的tree组件实现可编辑态

参数

可选参数属性列表

参数名 说明 类型 是否必填 默认值 可选值
uiMode ui表现方式；popup<弹窗>， page<页面>；默认是 popup String 是 popup page
funcMode 功能模式配置；display<展示模式>， edit<编辑模式>，checkbox<多选模式>， radio<单选模式>；默认是 radio String 是 radio dispaly,edit,checkbox
treeData 树源数据列表 Array 是 [] -
valueKey 绑定value的键属性(项的唯一key标识) String 否 id -
labelKey 用于显示的字段 String 否 label -
disabledKey 禁用节点绑定属性 String 否 disabled -
childrenKey 子节点绑定属性 (注意：当item[childrenKey]的值设为null时，代表是无下级数据的父节点，即非叶子节点) String 否 children -
title 弹出标题(如果是函数时会返回所选项的值作为回调参数如；title: (checked):String => {}) String, Function 否 '' -
selectParent 作用于funcMode=display模式下；是否可以选父级 Boolean 否 false true
foldAll 折叠时关闭所有已经打开的子集，再次打开时需要一级一级打开 Boolean 否 false true
themeColor 主题颜色 String 否 #f9ae3d -
cancelColor 取消按钮颜色 String 否 #757575 -
titleColor 标题颜色 String 否 #757575 -
border 是否有分割线 Boolean 否 false true
checkStrictly 作用于funcMode=checkbox模式下； 状态下节点选择完全受控（父子节点选中状态不再关联） Boolean 否 false true
checkStrictlyModel 作用于funcMode=checkbox模式下；父子节点关联模式：strong:强关联（不再受限节点的disabled控制），weak：弱关联（节点关联受disabled控制） String 是 weak strong
showHalfCheckedTips 作用于funcMode=checkbox模式下； checkStrictly为false的状态下生效；父子节点选中状态不再关联，是否展示半选提示； Boolean 否 false true
ifSearch 筛选search模式 Boolean 否 true false
searchModel 搜索模式配置 depHighlight: 从属高亮（显示层级并高亮显示）；common: 一般；remote: 远程 String 否 common depHighlight
showAuxiliaryLine 是否打开辅助线 Boolean 否 false true
loadData 异步加载函数 (node):Promise([childData]) => {} // demo有说明 Function 否 - -
height 只在uiMode=popup时生效；弹层容器的高度，默认是500 Number 否 500 -
changeVerify 作用于funcMode=display模式下； 验证函数 (current as any, chooseList as any []):String => {} // 验证函数会把当前控件的选择值作为参数返给函数体，demo有说明 Function 否 - -
expandedKeys (Controlled) Specifies the keys of the expanded treeNodes 展开配置项，格式为[valueKey] Array 否 [] -
expandedMode 展开模式配置： common: 一般模式；singe: 单一模式； String 否 common singe

Event 事件

事件名 说明 类型 回调参数
confirm 菜单收起时返回的筛选结果 emit array
clear 点击清除按钮时触发 emit -
cancel 关闭弹层和点击取消时触发 emit -
change 选项改变时触发 emit array

Slot 插槽

名称 说明 参数
label label插槽 data(当前项对于treeData里面的数据)
topBar topBar插槽 ----滚动区域顶部topBar插槽
bottomBar bottomBar插槽 ----滚动区域底部bottomBar插槽
fixedBottomBar fixedBottomBar插槽 ----固定在页面的底部，使用fixed进行定位
empty empty插槽 ----数据为空的插槽