标签：插件 vue Level -- children label treeselect id DaFei

树形插件 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',
                  },
                ],
              },
            ],
          },
        ],

View Code

效果图如下:

 

 

 

 

 

 

标签：插件,vue,Level,--,children,label,treeselect,id,DaFei
来源： https://www.cnblogs.com/dafei4/p/16506821.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。