uni-app写法在微信小程序实现tree树形结构实现复选效果
-
uni-app + 微信小程序
-
vue 写法
-
实现一个 tree 树形，勾选父元素时将子元素禁用掉，并且取消已勾选子元素
-
效果图
![]()
-
代码
-
组件 components/tree.vue
-
tree.vue
<view
v-if="hasChildren"
class="toggle-icon"
@click="toggleExpand"
>
{{ node.expanded ? '▼' : '▶' }}
<checkbox
class="checkbox"
:checked="node.checked" color="#ff9e19" :disabled="node.disabled"
@click.stop="handleCheck"
/>
{{ node.name}}
<tree
v-for="(child, index) in node.children"
:key="child.id"
:node="child"
@check="$emit('check', $event)"
@expand="$emit('expand', $event)"
:depth="depth + 1"
/>
-
index 页面
-
index.vue
<tree
v-for="node in treeData"
:key="node.id"
:node="node"
:depth="0"
@expand="handleExpand"
@check="handleNodeCheck"
/>
-
父元素和子元素联动效果，勾选、取消勾选父元素，子元素随着勾选，取消勾选，全选子元素自动勾选父元素
-
效果图
![]()
-
index.vue
<tree
v-for="node in treeData"
:key="node.id"
:node="node"
:depth="0"
@expand="handleExpand"
@check="handleNodeCheck"
/>
浙公网安备 33010602011771号