vue-search-tree

npm i vue-search-tree

Demo

https://buuing.github.io/vue-search-tree/

1: script ()

distcssjs,

jsvuescript

<link rel="stylesheet" href="./dist/[email protected]">
...
<script src="./dist/[email protected]"></script>

2: import

main.js``use

import SearchTree from 'vue-search-tree'

Vue.use(SearchTree)

Demo

(Attributes)

| | | | | :-: | :-: | :-: | :-: | data | | Array | | node-key | | String | 'id' | theme-color | | String | '#409eff' | search | | String | '' | hide-misses | | Boolean | true | expand-misses | | Boolean | false | search-debounce | () | Number | 300 | empty-text | | String | '' | show-checkbox | checkbox | Boolean | false | default-expand-all | | Boolean | false | expand-on-click-node | | Boolean | true | check-on-click-node | | Boolean | false | default-expanded-keys | keys | Array | [] | default-checked-keys | keys | Array | [] | filter-node | () | Function | - | props | | Object |

props ()

| | | | :-: | :-: | :-: | name | | String | children | | String | disabled | | String

(Event)

| | | | :-: | :-: | :-: | node-click | | 1: event, 2: node | node-checked | | 1: event, 2: node | node-expand | | 1: event, 2: node

(Methods)

| | | | | | :-: | :-: | :-: | :-: | :-: | getNodeByKey | key | 1: key | String / Number | , null | resetChecked | | - | - | - | setCheckedByKeys| keys | 1: keys, 2: | 1: Array, 2: Boolean | - | getCheckedKeys | keys | 1: (nodeKey) | String | keys | getCheckedNodes | nodes | - | - | nodes | remove | key | 1: key | String / Number | true, false | append | key | 1: key, 2: node | String / Number | true, false | insertBefore | key | 1: key, 2: node | String / Number | true, false | insertAfter | key | 1: key, 2: node | String / Number | true, false | getTotalOfNodes | | - | Function |

• getTotalOfNodes :

  • '': getTotalOfNodes(node => node.name.indexOf('') > -1)