Vue 实现下拉菜单树

「爱情、让人受尽委屈。」 2022-12-16 11:00 416阅读 0赞

效果：使用 Vue-Treeselect 实现  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70_pic_center]  
使用 npm 安装 vue-treeselect。

npm install --save @riophae/vue-treeselect

基础属性

> multiple： 设置 true 为允许选择多个选项（又名多重选择模式）。  
> options： 可用选项的数组。  
> normalizer：[自定义键名][Link 1]，可以更改 vue-treeselect options 所需的 id，label，children 名称

官网实例 更多配置属性方法请查看[官网][Link 2]

<template>
      <div id="app">
        <treeselect v-model="value" :multiple="true" :options="options" />
      </div>
    </template>
    
    <script>
      // 1、引入组件（固定写法，无需变更路径）
      import Treeselect from '@riophae/vue-treeselect'
      // 2、引入组件样式 也不可以不引入
      import '@riophae/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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/9ef70fbe932044988bc45d05f8175607.png
[Link 1]: https://www.vue-treeselect.cn/#customize-key-names
[Link 2]: https://www.vue-treeselect.cn/#node