树形插件 vue-treeselect 基本使用

树形插件 vue-treeselect 基本使用

 

vue-treeselect 是一个多选组件，具有对 Vue.js嵌套选项支持。

 

• 支持嵌套选项的单选和多选
• 模糊匹配
• 异步搜索
• 延迟加载（仅在需要时加载深度选项的数据）
• 键盘支持（使用Arrow Up & Arrow Down键导航，使用键选择选项Enter等）
• 丰富的选项和高度可定制的
• 支持 多种浏览器

 

需要Vue 2.2+

 

简单使用:

<!-- Vue SFC -->
<template>
    <div style="width: 250px;margin-left:200px;margin-top: 30px">
        大飞:vue-treeselect 测试demo: <br />
        { id: '1', label: '名字',children:[] },
        <treeselect v-model="value"
                    placeholder="请选择"
                    :clearable="false"
                    :disable-branch-nodes="true"
                    :options="options"
                    @select="feiSelect" />
    </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 {
    // register the component
    components: { Treeselect },
    data() {
      return {
        value: null,// define the default value
        options: [ // define options
          {
            id: '1',
            label: 'Level one 1',
            children: [
              {
                id: '1-1',
                label: 'Level two 1-1',
                children: [
                  {
                    id: '1-1-1',
                    label: 'Level three 1-1-1',
                  },
                ],
              },
            ],
          },
        ],
      }

    },
    methods: {
      feiSelect(node, instanceId) {
        // node 里面是 {id,label} 数据, 如果选择了父级,里面有children
        console.log("DaFei--DaFei--DaFei--DaFei--DaFei--DaFei--DaFei--",node);
        console.log("DaFei--DaFei--DaFei--DaFei--DaFei--DaFei--DaFei*******这是键",node.id);
        console.log("DaFei--DaFei--DaFei--DaFei--DaFei--DaFei--DaFei*******这是标签",node.label);
      },
    }
  }
</script>

完整树形结构数据:

options: [ // define options
          {
            id: '1',
            label: 'Level one 1',
            children: [
              {
                id: '1-1',
                label: 'Level two 1-1',
                children: [
                  {
                    id: '1-1-1',
                    label: 'Level three 1-1-1',
                  },
                ],
              },
            ],
          },
          {
            id: '2',
            label: 'Level one 2',
            children: [
              {
                id: '2-1',
                label: 'Level two 2-1',
                children: [
                  {
                    id: '2-1-1',
                    label: 'Level three 2-1-1',
                  },
                ],
              },
              {
                id: '2-2',
                label: 'Level two 2-2',
                children: [
                  {
                    id: '2-2-1',
                    label: 'Level three 2-2-1',
                  },
                ],
              },
            ],
          },
          {
            id: '3',
            label: 'Level one 3',
            children: [
              {
                id: '3-1',
                label: 'Level two 3-1',
                children: [
                  {
                    id: '3-1-1',
                    label: 'Level three 3-1-1',
                  },
                ],
              },
              {
                id: '3-2',
                label: 'Level two 3-2',
                children: [
                  {
                    id: '3-2-1',
                    label: 'Level three 3-2-1',
                  },
                ],
              },
            ],
          },
        ],

效果图如下:

 

 官方地址: vue-treeselect