vue-treeselect

基于@riophae/vue-treeselect二次开发 详细文档参考.

新增参数

• autoExpandSelected: 是否展开已选中节点及所有祖先节点。Boolean类型，默认false。
• scrollFirstOptionsId：打开面板时，默认滚动到的option节点。String类型，默认空。
• emptySelectedScrollTop: 选中项为空时，默认滚动到顶部。Boolean类型，默认false。

A multi-select component with nested options support for Vue.js

Features

• Single & multiple select with nested options support
• Fuzzy matching
• Async searching
• Delayed loading (load data of deep level options only when needed)
• Keyboard support (navigate using Arrow Up & Arrow Down keys, select option using Enter key, etc.)
• Rich options & highly customizable
• Supports a wide range of browsers (see below)
• RTL support

Requires Vue 2.2+

Getting Started

It's recommended to install vue-treeselect via npm, and build your app using a bundler like webpack.

npm install --save @brand_zd/vue-treeselect

This example shows how to integrate vue-treeselect with your Vue SFCs.

<!-- Vue SFC -->
<template>
  <div id="app">
    <treeselect v-model="value" :multiple="true" :options="options" />
  </div>
</template>

<script>
  // import the component
  import Treeselect from '@brand_zd/vue-treeselect'
  // import the styles
  import '@brand_zd/vue-treeselect/dist/vue-treeselect.css'

  export default {
    // register the component
    components: { Treeselect },
    data() {
      return {
        // define the default value
        value: null,
        // define options
        options: [ {
          id: 'a',
          label: 'a',
          children: [ {
            id: 'aa',
            label: 'aa',
          }, {
            id: 'ab',
            label: 'ab',
          } ],
        }, {
          id: 'b',
          label: 'b',
        }, {
          id: 'c',
          label: 'c',
        } ],
      }
    },
  }
</script>

Browser Compatibility

• Chrome
• Edge
• Firefox
• IE ≥ 9
• Safari

It should function well on IE9, but the style can be slightly broken due to the lack of support of some relatively new CSS features, such as transition and animation. Nevertheless it should look 90% same as on modern browsers.

Bugs

You can use this open an issue.

Contributing

1. Fork & clone the repo
2. Install dependencies by yarn or npm install
3. Check out a new branch
4. npm run dev & hack
5. Make sure npm test passes
6. Push your changes & file a pull request

License

Copyright (c) 2017-present Riophae Lee.

Released under the MIT License.