介绍
仿钉钉组织架构展示,支持多选单选和非选择模式
插件地址:ext.dcloud.net.cn/plugin?id=2…
效果图
代码片段
<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>