当页面布局空间不足的时候可以使用,点击出现树形下拉,选择完成后收回去,这里设置的是树形组件只能单选。具体可以自己随意配置。
node-key是必须加上的,标记每一个节点,
expanded 属性是设置每个节点的展开和收起,遍历每一个节点设置expanded 为false来收起树的节点。
setCheckedNodes 设置目前勾选的节点,使用此方法必须提前设置 node-key 属性。
@check事件 点击节点复选框之后触发
共两个参数依次为:传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象,用currObj,保存当前选中的节点data。使用setCheckedNodes设置选中节点为currObj.
html代码
<el-tree
:data="treeData"
:props="defaultProps"
node-key="id"
ref="tree"
show-checkbox
@check="handleNodeChecked"
></el-tree>
js部分代码
const handleNodeChecked = (currObj, isChecked) => {
const nodeDatas = proxy.$refs.tree.store.nodesMap;
for (let key in nodeDatas) {
nodeDatas[key].expanded = false;
}
if (isChecked) {
proxy.$refs.tree.setCheckedNodes([currObj]);
}
};