仿钉钉组织架构展示 顶部面包屑展示支持更多层级,支持搜索,支持多选单选和非选择模式

62 阅读1分钟

介绍

仿钉钉组织架构展示,支持多选单选和非选择模式

插件地址:ext.dcloud.net.cn/plugin?id=2…

效果图

Screenshot_20250910_104318.jpg Screenshot_20250910_104301.jpg

代码片段

	<select-tree :checkList="checkList" v-if="tree.length>0" :options="prop" @sendValue="confirm" :isCheck="isCheck"
	:treeNone="tree"></select-tree>
</view>

<script setup lang="ts">
	import SelectTree from '@/components/select-tree-zhikuany/tree.vue'
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { treeNode } from './data.js'

	const checkList = ref([]) //已选择列表
	const tree : any = ref([])//组织架构
	const prop : any = ref() //配置
	const isCheck : any = ref(false)//是否支持否选

	const queryData = defineProps()
	onLoad((params) => {
		console.log('onload', params)
		prop.value = JSON.parse(params.prop)
		isCheck.value = prop.value.isCheck
		console.log(isCheck.value)
		tree.value = treeNode
		console.log(tree.value)
	})

	//获取选中的值
	const confirm = (val : any, back : any) => {
		console.log(val)
		console.log(back)
		if (back) {
			backConfirm(val)
		} else {
			uni.showToast({
				title: JSON.stringify(val),
				icon: 'none'
			})
		}
	}
	// 返回上一页传参
	const backConfirm = (val : any) => {
		uni.$emit('selectSuccess', { list: val })
		uni.navigateBack();
	}
</script>