ElementUI中el-tree树形控件给叶子节点添加事件/只允许选中(末)叶子节点
在ElementUI的el-tree
组件中,您可以使用@node-click
事件来给叶子节点添加点击事件。如果您想要只允许勾选末叶子节点,可以使用check-strictly
属性。
以下是一个简单的例子,展示如何给叶子节点添加点击事件并且只允许勾选叶子节点:
<template>
<el-tree
:data="data"
:props="defaultProps"
@node-click="handleNodeClick"
:check-strictly="true"
></el-tree>
</template>
<script>
export default {
data() {
return {
data: [
{
label: '一级 1',
children: [
{
label: '二级 1-1',
children: [
{
label: '三级 1-1-1'
}
]
}
]
}
],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleNodeClick(data, node, self) {
// 判断是否为叶子节点
if (!node.expanded) {
// 执行对于叶子节点的操作
console.log('叶子节点被点击:', data.label);
}
}
}
};
</script>
在这个例子中,handleNodeClick
方法会在节点被点击时触发。通过检查节点是否具有expanded
属性(叶子节点没有该属性),可以判断是否点击了叶子节点。check-strictly
属性设置为true
可以确保只能勾选叶子节点,而不能勾选父节点。
评论已关闭