Vue Treeselect树形下拉框的使用

最新推荐文章于 2024-09-13 22:11:05 发布

小韩本韩！

最新推荐文章于 2024-09-13 22:11:05 发布

阅读量1.1k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_71645665/article/details/134421807

1-1 vue-treeselect 安装使用

官方文档： Vue-Treeselect

1.安装

npm install --save @riophae/vue-treeselect

安装完成之后可以在package.json文件中看到

在这里插入图片描述

2.引入组件和样式

至于是全局引入还是单页面引入那就看你自己需求了，我这里是单页面引入哈。

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

components: { Treeselect },

如图

在这里插入图片描述

3.使用


<treeselect v-model="form.parentId" :options="proOptions" :normalizer="normalizer" placeholder="选择上级目录" @select="change(node)"/>

v-model:双向数据绑定，

options：树形下拉菜单选项的数据源

normalizer:自定义展示结构字段，说白了把自己的名字换成树规定的名字，因为后端返回的名字肯定不一样的呀

select：选择事件

首先贴一段数据结构的代码瞅瞅：

       proOptions: [{
        id: 'a88',
        label: 'a88',
        children: [{
          id: 'aa',
          label: 'aa'
        }, {
          id: 'ab',
          label: 'ab'
        }]
      }, {
        id: 'b9999',
        label: 'b9999',
        children: [
          { id: 'b1', label: 'b11' },
          { id: 'b2', label: 'b222' },
          { id: 'b3', label: 'b3333' }
        ]
      }, {
        id: 'c555',
        label: 'c555'
      }]

首先说一下这个normalizer这个属性：

   normalizer(node) {
//当子节点也就是children=[]时候去掉子节点
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.catalogueId,
        label: node.catalogueName,
        children: node.children
      };
    },