关于若依框架树形下拉结构数据的问题

最新推荐文章于 2024-08-19 23:21:33 发布

豆本豆、

最新推荐文章于 2024-08-19 23:21:33 发布

阅读量2.2k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_64180379/article/details/126401067

版权

本文介绍了在若依框架中使用树形下拉结构的方法，包括全局和局部引入ElementUI组件，注册组件以解决显示问题。重点讲解了如何通过getTreeselect方法动态获取数据，以及如何根据业务需求转换后端返回的数据结构，确保与树形组件的id、label、children字段匹配。最后，提到了@select事件的使用，以便于在模块新增和修改时进行相应操作。

摘要由CSDN通过智能技术生成

最近接到一个若依开发的后台系统，其他有些地方用到了树形，直接用若依封装好的树形结构即可

（1）引入

地方看个人需求全局亦或者局部，如果项目多个地方用到，可在全局main.js引入


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

（2）如果是局部引入记得注册

components: {

    Treeselect,

  },

（3）然后在页面就可以应用了，局部引用如果不引入和注册会导致输入框不显示问题！

<el-form-item label="知识类型" prop="maId">
              <treeselect
                placeholder="请输入xxxx"
                v-model="双向数据绑定"
                :options="树形下拉菜单选项的数据源"
                :normalizer="树形下拉菜单选项的数据源"
              />
            </el-form-item>

可添加 @select：选择事件

（4）模块中新增和修改都要展示树形，所有说调用接口获取的数据要在这两个事件触发是调用一下方法 this.getTreeselect()