兼容H5、安卓App、微信小程序

实现逻辑：给默认选中节点的所有子节点添加一个disabled属性，以此禁用子节点。

/components/sonTreeNode/sonTreeNode.vue 封装成组件

<template><view><view :class="['item',item.is_level==1?'pL1':item.is_level==2?'pL2':'pL3']" v-for="(item, index) in treeList":key="index"><view class="item--row" @click.stop="handleOpenClose(item, index)"><view class="icon-box"><u-icon :name="item.isOpen?'arrow-down-fill':'arrow-up-fill'" size="12" color="#a8abb2"v-if="item.children && item.children.length"></u-icon></view><view class="checkbox-box"><u-checkbox-group><u-checkbox :disabled="item.disabled" :activeColor="themeColor" :label="item.name":name="item.id" :checked='item.checked' usedAlone @change="changeCheckbox($event,item)" /></u-checkbox-group></view></view><!-- 使用组件本身渲染子项 --><view v-if="item.isOpen && item.children && item.children.length"><treeItem :list="item.children"></treeItem></view></view></view>
</template><script>// 引入当前组件import treeItem from '../sonTreeNode/sonTreeNode'let activeTreeList = []export default {name: 'treeItem',components: {treeItem},// 接收列表数据props: {list: {type: Array,default: () => []},checkedId: {type: Array,default: () => []},},data() {return {themeColor: this.$themeColor,treeList: [],}},mounted() {this.setListUpOpen(this.list)this.treeList = this.listif (activeTreeList.length == 0) {activeTreeList = this.list}},methods: {// 全部展开setListUpOpen(list, isOpen = true) {list.forEach(item => {item.isOpen = isOpen// 数据回显，选中当前checked和禁用子节点 Startif (this.checkedId.includes(item.id)) {item.checked = truefunction setSonDisabled(son) {son.forEach(v => {v.disabled = trueif (v?.children?.length > 0) {setSonDisabled(v.children)}})}if (item?.children?.length > 0) {setSonDisabled(item.children)}}// Endif (item?.children?.length > 0) {this.setListUpOpen(item.children)}})return list},// 处理展开或收起handleOpenClose(item, index) {// 如果不存在isOpen属性就添加该属性。if (!item.hasOwnProperty('isOpen')) {item.isOpen = false}item.isOpen = !item.isOpenthis.$forceUpdate()},// 禁用子节点disableNode(node, disabled) {node.forEach(item => {item.checked = falseitem.disabled = disabledif (item?.children?.length > 0) {this.disableNode(item.children, disabled)}})return node},setAssign(node, child) {node.forEach(item => {child.forEach(v => {if (item.id == v.id) {if (v.hasOwnProperty('checked')) {item.checked = v.checked}item.children = v.children}})if (item?.children?.length > 0) {this.setAssign(item.children, child)}})return node},changeCheckbox(isChecked, item) {let isHasChild = item?.children?.length > 0let oldTreeList = this.treeListif (isChecked) {item.checked = trueif (isHasChild) {this.disableNode(item.children, true)}} else {item.checked = falseif (isHasChild) {this.disableNode(item.children, false)}}activeTreeList = this.setAssign(activeTreeList, oldTreeList)if (isHasChild) {// #ifdef H5 ||APP-PLUSthis.treeList = []this.$nextTick(() => {this.treeList = oldTreeList})// #endif// #ifdef MP-WEIXINthis.loadTreeList()// #endif}},getActiveTreeList() {return activeTreeList},cleatActiveTreeList() {activeTreeList = []},}}
</script><style scoped lang="scss">.pL1 {padding-left: 10rpx;}.pL2 {padding-left: 20rpx;}.pL3 {padding-left: 30rpx;}.item {margin-bottom: 15rpx;.item--row {display: flex;align-items: center;margin-bottom: 20rpx;.icon-box {width: 30rpx;}.checkbox-box {}}}
</style>

data.js 定义树形结构数据

const treeList = [{"id": 8,"name": "2栋","pid": 0,"children": [{"id": 31,"name": "C单元","pid": 8,"children": []},{"id": 30,"name": "B单元","pid": 8,"children": []},{"id": 13,"name": "A单元","pid": 8,"children": []}]},{"id": 9,"name": "3栋","pid": 0,"children": [{"id": 27,"name": "B单元","pid": 9,"children": [{"id": 28,"name": "6楼","pid": 27,}]},{"id": 14,"name": "A单元","pid": 9,"children": []}]},{"id": 11,"name": "4栋","pid": 0,"children": [{"id": 29,"name": "B单元","pid": 11,"children": []},{"id": 18,"name": "A单元","pid": 11,"children": [{"id": 53,"name": "22222","pid": 18,}]}]},{"id": 7,"name": "1栋","pid": 0,"children": [{"id": 67,"name": "A单元","pid": 7,"children": []},{"id": 66,"name": "B单元","pid": 7,"children": []},{"id": 65,"name": "C单元","pid": 7,"children": []},]}
]export default treeList

页面文件

<template><view class=""><u-button type="primary" @click="openPopup()">打开弹窗</u-button><u-popup :show="showPopup" mode="bottom" :round="20" closeable @close="closePopup" :closeOnClickOverlay="false"><view class="popup-wrap"><view class="popup-title">选择子项目</view><view class="popup-content"><sonTreeNode :list="treeList" ref="sonTreeNodeRef" :checkedId="checkedId"v-if="treeList.length>0" /></view><view class="popup-footer"><view class="btn-box1"><u-button @click="closePopup()">取消</u-button></view><view class="btn-box2"><u-button type="primary" @click="confirmPopup()">确定</u-button></view></view></view></u-popup></view>
</template><script>import Vue from 'vue'import sonTreeNode from '@/packageD/components/sonTreeNode/sonTreeNode.vue'import treeList from "./data.js"export default {components: {sonTreeNode},data() {return {treeList: [],showPopup: false,checkedId: [13, 18, 7, 28]};},onLoad() {},onUnload() {// #ifdef MP-WEIXINthis.clearInstance()// #endif},mounted() {// #ifdef MP-WEIXINVue.prototype.loadTreeList = this.loadTreeList;// #endif},methods: {clearInstance() {// 清除实例的逻辑this.$delete(Vue.prototype, 'loadTreeList');},loadTreeList() {this.$refs.sonTreeNodeRef.treeList = []this.$nextTick(() => {this.$refs.sonTreeNodeRef.treeList = this.$refs.sonTreeNodeRef.getActiveTreeList()})},openPopup(item, index) {this.treeList = treeListthis.showPopup = true},confirmPopup() {let treeList = this.$refs.sonTreeNodeRef.treeListconsole.log("选中的id=", this.getCheckedIdArr(treeList));this.checkedId = this.getCheckedIdArr(treeList)this.closePopup()},closePopup() {this.$refs.sonTreeNodeRef.cleatActiveTreeList()this.showPopup = falsethis.treeList = []},getCheckedIdArr(node, arr = []) {node.forEach(item => {if (item.checked) {arr.push(item.id)}if (item?.children?.length > 0) {this.getCheckedIdArr(item.children, arr)}})return arr},},}
</script><style lang="scss" scoped>.popup-wrap {padding: 20rpx 40rpx;.popup-title {font-size: 36rpx;text-align: center;}.popup-content {margin-top: 20rpx;height: 800rpx;overflow-y: auto;}.popup-footer {display: flex;justify-content: space-between;.btn-box1,.btn-box2 {width: 48%;}}}
</style>

效果图