vue2H5 多选层级树组件
时间: 2023-11-23 14:07:37 浏览: 47
以下是一个基于Vue2的多选层级树组件的示例代码,你可以根据自己的需求进行修改:
```html
<template>
<div class="tree">
<div class="tree-item" v-for="(item, index) in treeData" :key="index">
<input type="checkbox" :id="'tree'+index" :checked="item.checked" @change="checkNode(item, $event)">
<label :for="'tree'+index">{{ item.label }}</label>
<div class="tree-children" v-if="item.children && item.children.length > 0">
<tree :tree-data="item.children" :last-rank="lastRank(item)"></tree>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'tree',
props: {
treeData: {
type: Array,
default: () => []
},
lastRank: {
type: Boolean,
default: false
}
},
methods: {
checkNode(node, event) {
node.checked = event.target.checked
if (node.children && node.children.length > 0) {
node.children.forEach(child => {
child.checked = event.target.checked
})
}
}
}
}
</script>
<style scoped>
.tree {
margin-left: 20px;
}
.tree-item {
display: flex;
align-items: center;
}
.tree-item input[type="checkbox"] {
margin-right: 10px;
}
.tree-children {
margin-left: 20px;
}
</style>
```
在上述代码中,我们定义了一个名为`tree`的组件,该组件接收两个props:`treeData`和`lastRank`。其中,`treeData`是一个数组,用于表示树的数据结构;`lastRank`是一个布尔值,用于判断当前节点是否是最后一级节点。
在组件的模板中,我们使用了递归的方式来渲染整棵树。对于每个节点,我们都渲染了一个复选框和一个标签,并且根据是否有子节点来决定是否渲染子树。
在组件的方法中,我们定义了一个`checkNode`方法,用于处理节点的选中状态。当一个节点被选中时,我们需要将其所有子节点也选中;当一个节点被取消选中时,我们需要将其所有子节点也取消选中。