vue 3 tree树选择组件 - vue3-treeselect

vue 3 tree树选择组件 - vue3-treeselect
插件名称 vue3-treeselect
发布时间 2021年4月16日
插件作者 megafetis

具有嵌套选项的多选组件支持Vue 3。

从他的资料库中取得重大变化:

  • 属性value=>modelValue
  • 事件input=>updated:modelValue
  • 现在使用插槽 <template>

特征

  • 带有嵌套选项的单选和多选支持
  • 模糊匹配
  • 异步搜索
  • 延迟加载(仅在需要时加载深度选项的数据)
  • 键盘支持(使用Arrow UpArrow Down键导航,使用键选择选项Enter等)
  • 丰富的选项和高度可定制的
  • 支持多种浏览器(请参阅下文
  • RTL支持

需要Vue 3.0+

入门

建议通过npm安装vue3-treeselect,并使用webpack之类的捆绑器来构建您的应用程序。

npm install --save vue3-treeselect

本示例说明如何将vue3-treeselect与Vue SFC集成在一起。

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

<script>
  // import the component
  import Treeselect from 'vue3-treeselect'
  // import the styles
  import 'vue3-treeselect/dist/vue3-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>

如果您只是不想使用webpack或任何其他捆绑程序,则只需在页面中包含独立的UMD构建即可。这样,请确保在vue3-treeselect之前包括Vue作为依赖项。

<html>
  <head>
    <!-- include Vue 2.x -->
    <script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
    <!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->
    <script src="https://cdn.jsdelivr.net/npm/vue3-treeselect@^0.1.0/dist/vue3-treeselect.umd.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue3-treeselect@^0.1.0/dist/vue3-treeselect.min.css">
  </head>
  <body>
    <div id="app">
      <treeselect v-model="value" :multiple="true" :options="options" />
    </div>
  </body>
  <script>
      createApp({
          data: {
            // 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',
            } ],
        },
      })
        .component('treeselect', VueTreeselect.Treeselect)
        .mount('#app')

  </script>
</html>

浏览器兼容性

  • Chrome
  • Edge
  • Firefox
  • Safari

它应该可以在IE9上正常运行,但是由于缺少对某些相对较新的CSS功能(例如transition和)的支持,因此样式可能会略有破坏animation。但是,它应该看起来与现代浏览器的90%相同。