elementui树形复选框
时间: 2023-08-05 21:08:19 浏览: 119
Element UI 提供了一个组件来实现树形复选框:el-tree。使用 el-tree 可以创建一个具有层级结构的树形列表,并且每个节点可以带有复选框。
下面是一个示例代码,展示如何使用 el-tree 实现树形复选框:
```vue
<template>
<div>
<el-tree
:data="treeData"
:props="defaultProps"
node-key="id"
show-checkbox
default-expand-all
@check-change="handleCheckChange"
></el-tree>
</div>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: '节点1',
children: [
{
id: 2,
label: '节点1-1',
children: [
{
id: 3,
label: '节点1-1-1'
},
{
id: 4,
label: '节点1-1-2'
}
]
},
{
id: 5,
label: '节点1-2'
}
]
}
],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleCheckChange(data) {
console.log(data);
}
}
};
</script>
```
在上面的示例中,我们通过设置 `show-checkbox` 属性来显示复选框,`default-expand-all` 属性来默认展开所有节点。通过 `@check-change` 事件可以监听复选框的变化,触发相应的逻辑。
你可以根据自己的需求修改示例代码中的数据和事件处理逻辑。希望能帮到你!如果还有其他问题,请继续提问。
阅读全文