el-tree checkbox
时间: 2023-10-07 20:12:53 浏览: 62
el-tree-checkbox 是 Element UI 中用于树形结构的复选框组件。它可以与 el-tree(树形组件)一起使用,实现树形结构的多选功能。当 el-tree 的 show-checkbox 属性设置为 true 时,el-tree-checkbox 会显示在每个节点的前面,用户可以通过勾选和取消勾选来选择节点。
以下是一个示例代码,展示了如何使用 el-tree-checkbox:
```html
<template>
<div>
<el-tree
:data="treeData"
:props="treeProps"
show-checkbox
node-key="id"
@check-change="handleCheckChange"
></el-tree>
</div>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: 'Node 1',
children: [
{
id: 2,
label: 'Node 1-1',
children: [
{ id: 3, label: 'Node 1-1-1' },
{ id: 4, label: 'Node 1-1-2' }
]
},
{ id: 5, label: 'Node 1-2' }
]
},
{ id: 6, label: 'Node 2' }
],
treeProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleCheckChange(data) {
console.log(data);
}
}
};
</script>
```
在上面的代码中,el-tree 组件的 show-checkbox 属性设置为 true,表明要显示复选框。通过 node-key 属性指定了节点的唯一标识符,并通过 @check-change 监听勾选状态的变化。当用户勾选或取消勾选某个节点时,会触发 handleCheckChange 方法,并将勾选状态的数据传递给该方法。
希望上述示例对你有所帮助!如有更多问题,请随时提问。