diff --git a/dev/App.vue b/dev/App.vue index 8400aa6..39a0e96 100644 --- a/dev/App.vue +++ b/dev/App.vue @@ -3,9 +3,9 @@ - vue-date-range + vue-tree-list
diff --git a/readme.md b/readme.md index a1c11ff..2182d80 100644 --- a/readme.md +++ b/readme.md @@ -9,142 +9,195 @@ A vue component for tree structure. Support adding treenode/leafnode, editing no ``npm install vue-tree-list`` ```javascript -
- - - - - 
-      {{newTree}}
-
-
-... -import { VueTreeList, Tree, TreeNode } from 'vue-tree-list' -export default { - components: { - VueTreeList - }, - data () { - return { - newTree: {}, - data: new Tree([ - { - 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) + + + + + + ``` # props -**default-tree-node-name** +## props of vue-tree-list +| name | type | default | description | +|:-----:|:-------:|:------------:|:----:| +model | TreeNode | - | You can use `const head = new Tree([])` to generate a tree with the head of `TreeNode` type +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-expanded | boolean | true | Tree is expanded or not -Default name for new treenode. -**default-leaf-node-name** - -Default name for new leafnode. - -**default-expanded** - -Default node is expanded or not. +## props of TreeNode +### attributes +| name | type | default | description | +|:-----:|:-------:|:------------:|:----:| +id | string, number | current timestamp | The node's id +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 +delNodeDisabled | boolean | false | Show `delNode` button or not +children | array | null | The children of node +### 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 -**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** - -**delete-node** - -```javascript -@delete-node="onDel" -... -onDel (node) { - node.remove() -}, -``` - -**add-node** - -# Forbid dragging -Use `dragDisabled` to forbid dragging: -```javascript -data: new Tree([ - { - name: 'Node 1', - id: 1, - pid: 0, - dragDisabled: true, - ... -``` +# customize operation icons +The component has default icons for `addTreeNode`, `addLeafNode`, `editNode`, `delNode` button, but you can also customize them: +```html +addTreeNode +addLeafNode +editNode +delNode +``` \ No newline at end of file diff --git a/src/VueTreeList.vue b/src/VueTreeList.vue index 8a917e1..89b03ed 100644 --- a/src/VueTreeList.vue +++ b/src/VueTreeList.vue @@ -37,22 +37,22 @@
- + - + - + - +