1.0.3 • Published 5 years ago
dbltree v1.0.3
dbltree
基于element-ui的tree结构组件修改,增加数结构双击事件
安装
$ npm install dbltree -S
使用
在 main.js
文件中引入插件并注册
# main.js
import dbltree from 'dbltree'
Vue.use(dbltree)
在项目中使用 dbltree
<template>
<dbltree :data="data" :props="defaultProps" ></dbltree>
</template>
<script>
export default {
data () {
return {
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
}
}
</script>
特点
- 增加数节点双击事件
- 提供以
npm
的形式安装提供全局组件
事件
事件名称 | 说明 | 回调参数 |
---|---|---|
node-dblClick | 当某一节点被鼠标双击时会触发该事件 | 共四个参数,依次为:event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身 |
<dbltree :data="data" :props="defaultProps" @node-click="handleNodeClick" @node-dblClick="handleNodeDblClick" ></dbltree>