Vue 实现下拉菜单树

阳光的男夹克

已于 2023-08-24 16:13:44 修改

阅读量705

点赞数

分类专栏： Vue 2 文章标签： vue.js 前端 javascript

于 2020-10-20 09:19:36 首次发布

本文链接：https://blog.csdn.net/weixin_44640323/article/details/109174222

版权

Vue 2 专栏收录该内容

63 篇文章 4 订阅

订阅专栏

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

npm install --save @riophae/vue-treeselect

基础属性

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

官网实例更多配置属性方法请查看官网

<!-- Vue SFC -->
<template>
  <div class="dataStatisticsAnalysis" id="app">
    <treeselect class="treeselect-main" :normalizer="normalizer" 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',
        } ],
        normalizer(node) {
        	return {
          		id: node.id,
          		label: node.label,
          		children: node.children,
          	}
      	},
      }

    },
  }
</script>

/* Treeselect 自定义的样式*/
.treeselect-main {
  width: 204px;
  line-height: 30px;
}
.dataStatisticsAnalysis /deep/ .vue-treeselect__placeholder {
  line-height: 30px;
}
.dataStatisticsAnalysis /deep/ .vue-treeselect__control {
  height: 30px;
}
.dataStatisticsAnalysis /deep/ .vue-treeselect__single-value {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
}