【vue】Treeselect树形选择器使用

TOP灬小朋友

已于 2022-06-08 09:48:04 修改

阅读量2k

点赞数

分类专栏： vue 文章标签： vue.js Treeselect

于 2021-11-19 13:44:43 首次发布

本文链接：https://blog.csdn.net/qq_42021376/article/details/121420596

版权

vue 专栏收录该内容

18 篇文章 3 订阅

订阅专栏

效果图：

1.VueTreeselect官网

2.安装

npm install --save @riophae/vue-treeselect

3.使用，.在需要使用的组件上引用

import Treeselect from "@riophae/vue-treeselect";
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

使用treeselect组件

<el-form-item label="上级菜单" class="form-item" prop="parentId">
  <treeselect v-model="menu.parentId"
     :options="parentMenu"
     :normalizer="normalizer"
     :show-count="true"
     placeholder="选择上级菜单"/>
</el-form-item>

转换成菜单数据结构

// 转换菜单数据结构
 normalizer(node) {
     if (node.children && !node.children.length) {
        delete node.children
      }
      return {
         id: node.id,
         label: node.menuName,
         children: node.children
      }
   }

解释：

node.id:菜单ID

node.menuName:菜单名称

node.children:子菜单