element-plus 树形控件是一种常用的可视化组件,可以展示树型结构的数据。以下是 element-plus 树形控件的用法。
首先,需要在代码中导入 element-plus 的 Tree 组件:
import { Tree } from 'element-plus';
然后,在 HTML 中使用 Tree 组件:
<template>
<div>
<el-tree :data="data" :props="defaultProps"></el-tree>
</div>
</template>
在以上代码中,:data
属性绑定了一个包含树形结构数据的对象,:props
属性绑定了树形结构的默认属性,可以根据具体需求进行修改。
接下来,需要在 Vue 实例中定义数据和属性:
export default {
data() {
return {
data: [
{
label: '一级 1',
children: [
{
label: '二级 1-1',
children: [
{
label: '三级 1-1-1'
},
{
label: '三级 1-1-2'
}
]
},
{
label: '二级 1-2',
children: [
{
label: '三级 1-2-1'
},
{
label: '三级 1-2-2'
}
]
}
]
},
{
label: '一级 2',
children: [
{
label: '二级 2-1',
children: [
{
label: '三级 2-1-1'
},
{
label: '三级 2-1-2'
}
]
},
{
label: '二级 2-2',
children: [
{
label: '三级 2-2-1'
},
{
label: '三级 2-2-2'
}
]
}
]
}
],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
};
在以上代码中,data
属性定义了树形结构的数据,defaultProps
属性定义了树形结构的默认属性,其中 children
表示节点的子节点,默认值为 children
,label
表示节点的文本,默认值为 label
。
最后,可以根据需要对 Tree 组件的其他属性进行设置,例如设置节点可选中:
<template>
<div>
<el-tree :data="data" :props="defaultProps" show-checkbox @check-change="handleCheckChange"></el-tree>
</div>
</template>
在以上代码中,show-checkbox
属性表示节点前显示复选框,@check-change
事件表示复选框选中状态变化时的回调函数,可以在回调函数中获取选中的节点。