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(下面) |