Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
165d2dfb5d | ||
|
|
8f0a5d7737 | ||
|
|
a3b03a9579 | ||
|
|
136b33971c |
39
dev/App.vue
39
dev/App.vue
@@ -3,13 +3,17 @@
|
|||||||
<button @click="addNode">Add Node</button>
|
<button @click="addNode">Add Node</button>
|
||||||
<vue-tree-list
|
<vue-tree-list
|
||||||
@click="onClick"
|
@click="onClick"
|
||||||
@change-name="onChange"
|
@change-name="onChangeName"
|
||||||
@delete-node="onChange"
|
@delete-node="onDel"
|
||||||
@add-node="onChange"
|
@add-node="onAddNode"
|
||||||
:model="data"
|
:model="data"
|
||||||
default-tree-node-name="new node"
|
default-tree-node-name="new node"
|
||||||
default-leaf-node-name="new leaf"
|
default-leaf-node-name="new leaf"
|
||||||
v-bind:default-expanded="false">
|
v-bind:default-expanded="false">
|
||||||
|
<span class="icon" slot="addTreeNode">addTreeNode</span>
|
||||||
|
<span class="icon" slot="addLeafNode">addLeafNode</span>
|
||||||
|
<span class="icon" slot="editNode">editNode</span>
|
||||||
|
<span class="icon" slot="delNode">delNode</span>
|
||||||
</vue-tree-list>
|
</vue-tree-list>
|
||||||
<button @click="getNewTree">Get new tree</button>
|
<button @click="getNewTree">Get new tree</button>
|
||||||
<pre>
|
<pre>
|
||||||
@@ -32,6 +36,10 @@
|
|||||||
id: 1,
|
id: 1,
|
||||||
pid: 0,
|
pid: 0,
|
||||||
dragDisabled: true,
|
dragDisabled: true,
|
||||||
|
addTreeNodeDisabled: true,
|
||||||
|
addLeafNodeDisabled: true,
|
||||||
|
editNodeDisabled: true,
|
||||||
|
delNodeDisabled: true,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
name: 'Node 1-2',
|
name: 'Node 1-2',
|
||||||
@@ -56,8 +64,21 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onChange (data) {
|
onDel (params) {
|
||||||
console.log(data)
|
console.log(params)
|
||||||
|
node.remove()
|
||||||
|
},
|
||||||
|
|
||||||
|
onChangeName (params) {
|
||||||
|
console.log(params)
|
||||||
|
},
|
||||||
|
|
||||||
|
onAddNode (params) {
|
||||||
|
console.log(params)
|
||||||
|
},
|
||||||
|
|
||||||
|
onClick (params) {
|
||||||
|
console.log(params)
|
||||||
},
|
},
|
||||||
|
|
||||||
addNode () {
|
addNode () {
|
||||||
@@ -108,3 +129,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<style lang="less" rel="stylesheet/less" scoped>
|
||||||
|
.icon {
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta name="viewport" content="with=device-width,initial-scale=1.0,
|
<meta name="viewport" content="with=device-width,initial-scale=1.0,
|
||||||
maximum-scale=1.0,minimum-scale=1.0,uses-scalable=no">
|
maximum-scale=1.0,minimum-scale=1.0,uses-scalable=no">
|
||||||
<title>vue-date-range</title>
|
<title>vue-tree-list</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
2
dist/vue-tree-list.min.js
vendored
2
dist/vue-tree-list.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "vue-tree-list",
|
"name": "vue-tree-list",
|
||||||
"version": "1.1.2",
|
"version": "1.3.0",
|
||||||
"description": "A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.",
|
"description": "A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.",
|
||||||
"main": "dist/vue-tree-list.min.js",
|
"main": "dist/vue-tree-list.min.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
@@ -54,10 +54,10 @@
|
|||||||
"sourcemap": "^0.1.0",
|
"sourcemap": "^0.1.0",
|
||||||
"standard": "^12.0.1",
|
"standard": "^12.0.1",
|
||||||
"url-loader": "^0.5.7",
|
"url-loader": "^0.5.7",
|
||||||
"vue": "^2.3.4",
|
"vue": "^2.6.6",
|
||||||
"vue-loader": "^11.1.3",
|
"vue-loader": "^11.1.3",
|
||||||
"vue-style-loader": "^2.0.3",
|
"vue-style-loader": "^2.0.3",
|
||||||
"vue-template-compiler": "^2.2.0",
|
"vue-template-compiler": "^2.6.6",
|
||||||
"webpack": "^1.13.2",
|
"webpack": "^1.13.2",
|
||||||
"webpack-dev-server": "1.14.0",
|
"webpack-dev-server": "1.14.0",
|
||||||
"webpack-merge": "^0.14.1"
|
"webpack-merge": "^0.14.1"
|
||||||
|
|||||||
300
readme.md
300
readme.md
@@ -9,145 +9,195 @@ A vue component for tree structure. Support adding treenode/leafnode, editing no
|
|||||||
``npm install vue-tree-list``
|
``npm install vue-tree-list``
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
<div>
|
<template>
|
||||||
<button @click="addNode">Add Node</button>
|
<div>
|
||||||
<vue-tree-list
|
<button @click="addNode">Add Node</button>
|
||||||
@click="onClick"
|
<vue-tree-list
|
||||||
@change-name="onChange"
|
@click="onClick"
|
||||||
@delete-node="onChange"
|
@change-name="onChangeName"
|
||||||
@add-node="onChange"
|
@delete-node="onDel"
|
||||||
:model="data"
|
@add-node="onAddNode"
|
||||||
default-tree-node-name="new node"
|
:model="data"
|
||||||
default-leaf-node-name="new leaf"
|
default-tree-node-name="new node"
|
||||||
v-bind:default-expanded="false">
|
default-leaf-node-name="new leaf"
|
||||||
</vue-tree-list>
|
v-bind:default-expanded="false">
|
||||||
<button @click="getNewTree">Get new tree</button>
|
<span class="icon" slot="addTreeNode">addTreeNode</span>
|
||||||
<pre>
|
<span class="icon" slot="addLeafNode">addLeafNode</span>
|
||||||
{{newTree}}
|
<span class="icon" slot="editNode">editNode</span>
|
||||||
</pre>
|
<span class="icon" slot="delNode">delNode</span>
|
||||||
</div>
|
</vue-tree-list>
|
||||||
...
|
<button @click="getNewTree">Get new tree</button>
|
||||||
import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
|
<pre>
|
||||||
export default {
|
{{newTree}}
|
||||||
components: {
|
</pre>
|
||||||
VueTreeList
|
</div>
|
||||||
},
|
</template>
|
||||||
data () {
|
<script>
|
||||||
return {
|
import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
|
||||||
newTree: {},
|
export default {
|
||||||
data: new Tree([
|
components: {
|
||||||
{
|
VueTreeList
|
||||||
name: 'Node 1',
|
|
||||||
id: 1,
|
|
||||||
pid: 0,
|
|
||||||
dragDisabled: true,
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: 'Node 1-2',
|
|
||||||
id: 2,
|
|
||||||
isLeaf: true,
|
|
||||||
pid: 1
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Node 2',
|
|
||||||
id: 3,
|
|
||||||
pid: 0,
|
|
||||||
disabled: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Node 3',
|
|
||||||
id: 4,
|
|
||||||
pid: 0
|
|
||||||
}
|
|
||||||
])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onChange (data) {
|
|
||||||
console.log(data)
|
|
||||||
},
|
},
|
||||||
|
data () {
|
||||||
addNode () {
|
return {
|
||||||
var node = new TreeNode({ name: 'new node', isLeaf: false })
|
newTree: {},
|
||||||
if (!this.data.children) this.data.children = []
|
data: new Tree([
|
||||||
this.data.addChildren(node)
|
{
|
||||||
},
|
name: 'Node 1',
|
||||||
|
id: 1,
|
||||||
getNewTree () {
|
pid: 0,
|
||||||
var vm = this
|
dragDisabled: true,
|
||||||
function _dfs (oldNode) {
|
addTreeNodeDisabled: true,
|
||||||
var newNode = {}
|
addLeafNodeDisabled: true,
|
||||||
|
editNodeDisabled: true,
|
||||||
for (var k in oldNode) {
|
delNodeDisabled: true,
|
||||||
if (k !== 'children' && k !== 'parent') {
|
children: [
|
||||||
newNode[k] = oldNode[k]
|
{
|
||||||
|
name: 'Node 1-2',
|
||||||
|
id: 2,
|
||||||
|
isLeaf: true,
|
||||||
|
pid: 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Node 2',
|
||||||
|
id: 3,
|
||||||
|
pid: 0,
|
||||||
|
disabled: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Node 3',
|
||||||
|
id: 4,
|
||||||
|
pid: 0
|
||||||
}
|
}
|
||||||
}
|
])
|
||||||
|
|
||||||
if (oldNode.children && oldNode.children.length > 0) {
|
|
||||||
newNode.children = []
|
|
||||||
for (var i = 0, len = oldNode.children.length; i < len; i++) {
|
|
||||||
newNode.children.push(_dfs(oldNode.children[i]))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return newNode
|
|
||||||
}
|
}
|
||||||
|
|
||||||
vm.newTree = _dfs(vm.data)
|
|
||||||
},
|
},
|
||||||
|
methods: {
|
||||||
|
onDel (node) {
|
||||||
|
console.log(node)
|
||||||
|
node.remove()
|
||||||
|
},
|
||||||
|
|
||||||
onClick(model) {
|
onChangeName (params) {
|
||||||
console.log(model)
|
console.log(params)
|
||||||
|
},
|
||||||
|
|
||||||
|
onAddNode (params) {
|
||||||
|
console.log(params)
|
||||||
|
},
|
||||||
|
|
||||||
|
onClick (params) {
|
||||||
|
console.log(params)
|
||||||
|
},
|
||||||
|
|
||||||
|
addNode () {
|
||||||
|
var node = new TreeNode({ name: 'new node', isLeaf: false })
|
||||||
|
if (!this.data.children) this.data.children = []
|
||||||
|
this.data.addChildren(node)
|
||||||
|
},
|
||||||
|
|
||||||
|
getNewTree () {
|
||||||
|
var vm = this
|
||||||
|
function _dfs (oldNode) {
|
||||||
|
var newNode = {}
|
||||||
|
|
||||||
|
for (var k in oldNode) {
|
||||||
|
if (k !== 'children' && k !== 'parent') {
|
||||||
|
newNode[k] = oldNode[k]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (oldNode.children && oldNode.children.length > 0) {
|
||||||
|
newNode.children = []
|
||||||
|
for (var i = 0, len = oldNode.children.length; i < len; i++) {
|
||||||
|
newNode.children.push(_dfs(oldNode.children[i]))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return newNode
|
||||||
|
}
|
||||||
|
|
||||||
|
vm.newTree = _dfs(vm.data)
|
||||||
|
},
|
||||||
|
|
||||||
|
onClick(model) {
|
||||||
|
console.log(model)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
</script>
|
||||||
|
<style lang="less" rel="stylesheet/less">
|
||||||
|
.vtl {
|
||||||
|
.vtl-drag-disabled {
|
||||||
|
background-color: #d0cfcf;
|
||||||
|
&:hover {
|
||||||
|
background-color: #d0cfcf;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.vtl-disabled {
|
||||||
|
background-color: #d0cfcf;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="less" rel="stylesheet/less" scoped>
|
||||||
|
.icon {
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
# props
|
# props
|
||||||
**default-tree-node-name**
|
## props of vue-tree-list
|
||||||
|
| name | type | default | description |
|
||||||
Default name for new treenode.
|
|:-----:|:-------:|:------------:|:----:|
|
||||||
|
model | TreeNode | - | You can use `const head = new Tree([])` to generate a tree with the head of `TreeNode` type
|
||||||
**default-leaf-node-name**
|
default-tree-node-name | string | New node node | Default name for new treenode
|
||||||
|
default-leaf-node-name | string | New leaf node | Default name for new leafnode
|
||||||
Default name for new leafnode.
|
default-expanded | boolean | true | Tree is expanded or not
|
||||||
|
|
||||||
|
|
||||||
**onDeleteNode**
|
## props of TreeNode
|
||||||
|
### attributes
|
||||||
```javascript
|
| name | type | default | description |
|
||||||
onDeleteNode(confirm) {
|
|:-----:|:-------:|:------------:|:----:|
|
||||||
if (something) {
|
id | string, number | current timestamp | The node's id
|
||||||
confirm()
|
isLeaf | boolean | false | The node is leaf or not
|
||||||
}
|
dragDisabled | boolean | false | Forbid dragging tree node
|
||||||
}
|
addTreeNodeDisabled | boolean | false | Show `addTreeNode` button or not
|
||||||
```
|
addLeafNodeDisabled | boolean | false | Show `addLeafNode` button or not
|
||||||
|
editNodeDisabled | boolean | false | Show `editNode` button or not
|
||||||
**default-expanded**
|
delNodeDisabled | boolean | false | Show `delNode` button or not
|
||||||
|
children | array | null | The children of node
|
||||||
Default node is expanded or not.
|
|
||||||
|
|
||||||
|
### methods
|
||||||
|
| name | params | description |
|
||||||
|
|:-----:|:-------:|:----:|
|
||||||
|
changeName | name | Change node's name
|
||||||
|
addChildren | children: object, array | Add children to node
|
||||||
|
remove | - | Remove node from the tree
|
||||||
|
moveInto | target: TreeNode | Move node into another node
|
||||||
|
insertBefore | target: TreeNode | Move node before another node
|
||||||
|
insertAfter | target: TreeNode | Move node after another node
|
||||||
|
|
||||||
# events
|
# events
|
||||||
**click**
|
| name | params | description |
|
||||||
|
|:-----:|:-------:|:------------:|:----:|
|
||||||
|
click | TreeNode | Trigger when clicking a tree node
|
||||||
|
change-name | {'id', 'oldName', 'newName'} | Trigger after changing a node's name
|
||||||
|
delete-node | TreeNode | Trigger when clicking `delNode` button. You can call `remove` of `TreeNode` to remove the node.
|
||||||
|
add-node | TreeNode | Trigger after adding a new node
|
||||||
|
|
||||||
**change-name**
|
# customize operation icons
|
||||||
|
The component has default icons for `addTreeNode`, `addLeafNode`, `editNode`, `delNode` button, but you can also customize them:
|
||||||
**delete-node**
|
|
||||||
|
|
||||||
**add-node**
|
|
||||||
|
|
||||||
# Forbid dragging
|
|
||||||
Use `dragDisabled` to forbid dragging:
|
|
||||||
```javascript
|
|
||||||
data: new Tree([
|
|
||||||
{
|
|
||||||
name: 'Node 1',
|
|
||||||
id: 1,
|
|
||||||
pid: 0,
|
|
||||||
dragDisabled: true,
|
|
||||||
...
|
|
||||||
```
|
|
||||||
|
|
||||||
|
```html
|
||||||
|
<span class="icon" slot="addTreeNode">addTreeNode</span>
|
||||||
|
<span class="icon" slot="addLeafNode">addLeafNode</span>
|
||||||
|
<span class="icon" slot="editNode">editNode</span>
|
||||||
|
<span class="icon" slot="delNode">delNode</span>
|
||||||
|
```
|
||||||
@@ -10,10 +10,8 @@
|
|||||||
*/
|
*/
|
||||||
const TreeNode = function (data) {
|
const TreeNode = function (data) {
|
||||||
const { id, isLeaf } = data
|
const { id, isLeaf } = data
|
||||||
// this.name = name
|
|
||||||
this.id = (typeof id === 'undefined') ? new Date().valueOf() : id
|
this.id = (typeof id === 'undefined') ? new Date().valueOf() : id
|
||||||
this.parent = null
|
this.parent = null
|
||||||
// this.pid = null
|
|
||||||
this.children = null
|
this.children = null
|
||||||
this.isLeaf = !!isLeaf
|
this.isLeaf = !!isLeaf
|
||||||
|
|
||||||
@@ -29,7 +27,7 @@ TreeNode.prototype.changeName = function (name) {
|
|||||||
this.name = name
|
this.name = name
|
||||||
}
|
}
|
||||||
|
|
||||||
TreeNode.prototype.addChildren = function (children, isNew) {
|
TreeNode.prototype.addChildren = function (children) {
|
||||||
if (!this.children) {
|
if (!this.children) {
|
||||||
this.children = []
|
this.children = []
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -37,23 +37,23 @@
|
|||||||
</div>
|
</div>
|
||||||
<input v-else class="vtl-input" type="text" ref="nodeInput" :value="model.name" @input="updateName" @blur="setUnEditable">
|
<input v-else class="vtl-input" type="text" ref="nodeInput" :value="model.name" @input="updateName" @blur="setUnEditable">
|
||||||
<div class="vtl-operation" v-show="isHover">
|
<div class="vtl-operation" v-show="isHover">
|
||||||
<span title="add tree node" @click.stop.prevent="addChild(false)" v-if="!model.isLeaf">
|
<span title="add tree node" @click.stop.prevent="addChild(false)" v-if="!model.isLeaf && !model.addTreeNodeDisabled">
|
||||||
<slot name="addTreeNode">
|
<slot name="addTreeNode">
|
||||||
<i class="vtl-icon vtl-icon-folder-plus-e"></i>
|
<i class="vtl-icon vtl-icon-folder-plus-e"></i>
|
||||||
</slot>
|
</slot>
|
||||||
</span>
|
</span>
|
||||||
<span title="add tree node" @click.stop.prevent="addChild(true)" v-if="!model.isLeaf">
|
<span title="add leaf node" @click.stop.prevent="addChild(true)" v-if="!model.isLeaf && !model.addLeafNodeDisabled">
|
||||||
<slot name="addLeafNode">
|
<slot name="addLeafNode">
|
||||||
<i class="vtl-icon vtl-icon-plus"></i>
|
<i class="vtl-icon vtl-icon-plus"></i>
|
||||||
</slot>
|
</slot>
|
||||||
</span>
|
</span>
|
||||||
<span title="edit" @click.stop.prevent="setEditable">
|
<span title="edit" @click.stop.prevent="setEditable" v-if="!model.editNodeDisabled">
|
||||||
<slot name="edit">
|
<slot name="editNode">
|
||||||
<i class="vtl-icon vtl-icon-edit"></i>
|
<i class="vtl-icon vtl-icon-edit"></i>
|
||||||
</slot>
|
</slot>
|
||||||
</span>
|
</span>
|
||||||
<span title="delete" @click.stop.prevent="delNode">
|
<span title="delete" @click.stop.prevent="delNode" v-if="!model.delNodeDisabled">
|
||||||
<slot name="edit">
|
<slot name="delNode">
|
||||||
<i class="vtl-icon vtl-icon-trash"></i>
|
<i class="vtl-icon vtl-icon-trash"></i>
|
||||||
</slot>
|
</slot>
|
||||||
</span>
|
</span>
|
||||||
@@ -76,6 +76,10 @@
|
|||||||
v-bind:default-expanded="defaultExpanded"
|
v-bind:default-expanded="defaultExpanded"
|
||||||
:model="model"
|
:model="model"
|
||||||
:key='model.id'>
|
:key='model.id'>
|
||||||
|
<slot name="addTreeNode" slot="addTreeNode" />
|
||||||
|
<slot name="addLeafNode" slot="addLeafNode" />
|
||||||
|
<slot name="editNode" slot="editNode" />
|
||||||
|
<slot name="delNode" slot="delNode" />
|
||||||
</item>
|
</item>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -110,10 +114,6 @@
|
|||||||
type: String,
|
type: String,
|
||||||
default: 'New tree node'
|
default: 'New tree node'
|
||||||
},
|
},
|
||||||
onDeleteNode: {
|
|
||||||
type: Function,
|
|
||||||
default: confirm => { confirm() }
|
|
||||||
},
|
|
||||||
defaultExpanded: {
|
defaultExpanded: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
@@ -171,9 +171,6 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
delNode () {
|
delNode () {
|
||||||
const vm = this
|
|
||||||
const confirm = () => vm.model.remove()
|
|
||||||
this.onDeleteNode(confirm)
|
|
||||||
var node = this.getRootNode()
|
var node = this.getRootNode()
|
||||||
node.$emit('delete-node', this.model)
|
node.$emit('delete-node', this.model)
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user