Everyone, after all, must learn to grow up alone

preface

1 introduction

Common properties props

options

:options="options" options: [{id: 'A', name: 'A', // Default isDisabled: true, // Default to expand the leaf isDefaultExpanded: true, children: [] }]Copy the code

value

V-model ="value" // select the node by default // fill with the node ID // select a value: [' a ']Copy the code

default-expand-level

:default-expand-level="level" // Expand the first level by default. // The first level below the branch. // If you want to specify a branch, configure isDefaultExpanded Level: 1 in optionsCopy the code

normalizer

Normalizer = "normalizer" // Function type, Parameter node // Default data format ID label children // Replace label only with name Normalizer (node) {return {... node, // id: node.key, label: node.name // children: node.subOptions, } }Copy the code

multiple

// Support multiple options :multiple= "true"Copy the code

multiple

// Show the number of leaf nodes :show-count="true"Copy the code

flat

Flat ="true" flat="true"Copy the code

Common slot slot

option-label

{{node,count} <label slot="option-label" slot-scope="{node,count}"> {{node.isBranch? 'Branch' : 'Leaf' }}: {{ node.label }} <span>({{ count }})</span> </label>Copy the code

Common Event Methods

select

node@select ="select"Copy the code

deselect

node@deselect ="deselect"Copy the code

2 use

The installation

npm i @riophae/vue-treeselect --save
Copy the code

The introduction of

import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
Copy the code

Tree selection

<template> <div class="BaseTreeSelect"> < treesELECT V-model ="value" placeholder=" placeholder ":options="options" :multiple="true" :flat="true" :show-count="true" :normalizer="normalizer" :default-expand-level="1" @select="select" > <label slot="option-label" slot-scope="{ node, shouldShowCount, count, labelClassName, countClassName }" :class="labelClassName" > {{ node.isBranch ? 'Branch' : 'Leaf' }}: {{ node.label }} <span v-if="shouldShowCount" :class="countClassName"> ({{ count }}) </span> </label> </treeselect> <p>{{ value }}</p> </div> </template> <script> // import the component import Treeselect from '@riophae/vue-treeselect' // import the styles import '@riophae/vue-treeselect/dist/vue-treeselect.css' export default { components: {Treeselect}, data() {return {// default select // id set value: ['A', 'ABA', 'bb'], // Custom key name // default id label children // Label replaces name Normalizer (node) {return {... Node, // id: node.key, label: node.name // children: node.subOptions,}}, // Tree structure: [{id: 'A', name: 'a', children: [{id: 'AA', name: 'AA', isDisabled: true}, {id: 'AB', name: 'AB', // Default expansion isDefaultExpanded: true, children: [ { id: 'ABA', name: 'aba' }, { id: 'ABB', name: 'abb', isNew: true } ] } ] }, { id: 'b', name: 'b', children: [ { id: 'ba', name: 'ba' }, { id: 'bb', name: 'bb' } ] }, { id: 'c', name: 'c' } ] } }, methods: { select(node) { console.log('node=', node) } } } </script>Copy the code

3. Pay attention to

Value Selects some nodes by default. IsDefaultExpanded Expands a branch by default

The end of the

Today’s movie is very good, and you are also very good today

Good night ^_^

Refer to the link

  • Vue – treeselect document

Review past

  • Learn a Vue plugin (1) every day — Better scroll
  • Learn a VUE plugin (2) every day — vue-awesome-swiper
  • Learn a vUE plugin every day (3) — esLint + prettier + stylelint
  • Learn a VUE plugin (4) every day — the V-Viewer
  • Learn a vUE plugin (5) every day — PostCSs-pxtorem
  • Learn a Vue plugin every day (6) — Momentjs
  • Learn a Vue plugin (7) every day — HammerJS
  • Learn a vUE plugin (8) — McAnvas every day
  • Learn a VUE plugin (9) — MathJax every day
  • Learn a vUE plugin every day (10) — VUe-aPlayer
  • Learn a vUE plugin every day (11) — vue-drag-resize
  • Learn a vUE plugin every day (12) — VUe-fullPage
  • Learn a vUE plugin (13) every day — HTML2Canvas
  • Learn a VUE plug-in (14) every day — vue-pull-to
  • So, how about a VUE plugin (15) every day — Vue-Content-Placeholder
  • Learn a vUE plugin every day (16) – VUe-video-player
  • Learn a vue plugin every day (17) — js-file-download
  • Learn a VUE plugin (18) every day — JS-Audio-Recorder