vue 下拉选择树 vue-treeselect

最新推荐文章于 2024-08-09 07:25:58 发布

代码工人笔记

最新推荐文章于 2024-08-09 07:25:58 发布

阅读量643

点赞数 7

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/zhao3756/article/details/135088275

Web前端专栏收录该内容

166 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用vue-treeselect下拉选择树组件，包括npm安装、组件引入、数据结构转换和HTML模板的配置。

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

vue 下拉选择树 vue-treeselect

安装

npm i @riophae/vue-treeselect --save

引入

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

export default {
  components: { Treeselect },
  data() {
    return {
      deptOptions: [{
        "deptId": 100,
        "parentId": 0,
        "deptName": "公司名",
        "children": [
            {
                "deptId": 101,
                "parentId": 100,
                "deptName": "深圳总公司",
                "children": [
                    {
                        "deptId": 103,
                        "parentId": 101,
                        "deptName": "研发部门"
                    },
                    {
                        "deptId": 104,
                        "parentId": 101,
                        "deptName": "市场部门"
                    },
                ]
            },
            {
                "deptId": 102,
                "parentId": 100,
                "deptName": "长沙分公司",
                "children": [
                    {
                        "deptId": 108,
                        "parentId": 102,
                        "deptName": "市场部门"
                    },
                ]
            }
        ]
    }
],
    };
  },

  methods: {
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children
      };
    },
  }
};

html

<el-form-item label="上级部门" prop="parentId">
   <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" />
</el-form-item>