vue中treeselect的基本使用

最新推荐文章于 2025-06-19 09:14:12 发布

甜菜，是我鸭！

最新推荐文章于 2025-06-19 09:14:12 发布

阅读量5.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/baicai_123/article/details/111314348

vue 专栏收录该内容

9 篇文章

订阅专栏

博客介绍了vue-treeselect中文网地址，详细说明了该插件的安装、引用、注册和添加步骤，还给出了treeselect参数示例，同时提到若数据不是标准的id、lable结构，需对内容进行转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

0.vue-treeselect中文网地址：https://www.vue-treeselect.cn/

1.安装插件：npm install --save @riophae/vue-treeselect

2.引用：

import Treeselect from '@riophae/vue-treeselect';

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

3.注册：

components: {Treeselect },

4.添加：

<treeselect v-model="treevalue"

:multiple="false"

:options="treeoptions"

placeholder="选择部门..."/>

5.treeselect参数

treevalue: null,

treeoptions: [],

6.如果数据tree不是标准的id，lable结构结构则需要对内容进行转换（我使用的数据是在name，nodeid中）

/*treeSelect获取筛选条件*/
    getTreeSelete() {
      let me = this;
      $.ajax({
        url:'...........',
        dataType: 'json',
        type: 'post',
        beforeSend: function (request) {
          request.setRequestHeader("token", me.token);
        },
        success: function (result) {
          if (result.code == 200) {
            me.treeoptions = me.getTree(result.data.treeData);
          }
        }
      });
    },

/*转化tree标准格式*/
    getTree(tree = []) {
      let arr = [];
      if (tree.length !== 0) {
        tree.forEach(item => {
          let obj = {};
          obj.label = item.name;
          obj.id = item.nodeid;
          if (item.children.length > 0) {
            obj.children = this.getTree(item.children);
          }
          arr.push(obj);
        });
      }
      return arr
    },