Tree
这是一个仿照element ui写的树拖拽组件,vue2
属性
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| data |
展示数据（如果想要自定义小图标，则在需要小图标的地方加入“TreeImg:‘ ’ ”，如果是静态图片必须是绝对路径，以’@/‘开头；） |
Array |
|
|
| //draggable |
//是否开启拖拽 |
//Boolean |
|
//false |
| props |
配置选项,具体看下表 |
Object |
|
|
| draggableColor |
拖拽时颜色展示(6位16进制) |
String |
|
409EFF |
| height |
每行高度 |
String |
|
26px |
| fontSize |
字体大小 |
String |
|
14px |
| icon |
树状左侧三角标的自定义图片(如果是静态图片必须是绝对路径，以’@/‘开头；) |
String |
|
|
props
| 参数 |
说明 |
类型 |
默认值 |
| label |
指定节点标签为节点对象的某个属性值 |
String |
label |
| children |
指定子节点 |
String |
children |
| id |
唯一参数，不可重复 |
|
id |
事件
| 事件名称 |
说明 |
回调参数 |
| node-click |
节点被点击时的回调 |
共三个参数，依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
| tree-drop |
拖拽结束时触发的事件 |
共六个参数，依次为：最后一个遇见的节点的data对应的对象、最后一个遇见节点对应的Node、最后一个节点的event、移动的节点的id、最后一个节点的id、在最后一个节点的before(上面)inner(里面)after(下面) |
| tree-start |
拖拽开始时触发的事件 |
共三个参数，依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
| tree-over |
拖拽中的事件 |
共四个参数，依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身、目前在节点组件的before(上面)inner(里面)after(下面) |