实现效果
实现效果：通过选中不同级别的节点执行不同的方法（不包括半选状态）
引入数据
html代码图
先来一一看下参数吧
-
data="data" && props="defaultProps"
传入数据，通过props配置解析选项并渲染
json数据中的children是节点数的子级数据，可以无限嵌套下去
数据结构 -
配置选项
defaultProps: { children: "children",//子节点 label: "text" //标签文本的内容 } show-checkbox（勾选框）
适用于需要选择层级时使用。-
render-after-expand="false"
render-after-expand ref="tree" （vue中的属性）
ref 被用来给元素或子组件注册引用信息highlight-current = "true"
highlight-current
@check="handleCheckChange"
@→vue中给控件绑定事件
check→当复选框被点击的时候触发
共传入两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性
- handleCheckChange→事件名称
方法截图
-
都可以拿到选中的节点对象，根据不同的需求自己判断使用
勾选状态截图
打印截图 到了这里已经可以拿到选中状态的节点数据，接下来就是根据节点数据（比如不同的节点id）判断不同节点来执行不同的方法
最近工作中被这个东西搞得晕头转向，静下心去想想，很容易就实现
这里卿洋
愿喜❤️
