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

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

（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()

/** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.getTreeselect();
      this.open = true;
      this.title = "添加轮播图信息";
      listKnowledgeType().then((response) => {
        this.knowledgeTypeOptions = this.handleTree(response.data, "maId");
      });
    },

（5）根据个人业务的需求去匹配对应字段即可

参照:

/** 查询分类管理下拉树结构 */
    getTreeselect() {
      // 调接口获取分类管理模块的 naName 和
      listKnowledgeType().then((response) => {
        this.knowledgeTypeOptions = [];
        const data = { maId: 0, maName: "顶级节点", children: [] };
        data.children = this.handleTree(response.data, "maId", "parentId");
        this.knowledgeTypeOptions.push(data);
      });
    },

（6）转换数据结构

/** 转换分类管理数据结构 */
    normalizer(node) {
        //当子节点也就是children=[]时候去掉子节点
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.maId,
        label: node.maName,
        children: node.children,
      };
    },

上面转换简单理解就是

1、先把数据children为空的节点都删除，然后给它规定三个字段id，label，children来更方便的操作数据

2、参数node就是每个子节点，可认为是每隔子项数据

3、id就是v-model绑定的值，就相当于opiton里的value

4、label就是展示的值，就是让用户看到理解并选择的值

5、children 就是数据的子节点

后端可能传的数据id叫ids，label叫value，children叫content，但是树只认识id，label，children，那你给他对应上就行了，就这么简单

再来就是选择事件了，这个好理解，参数node是当前的节点，你可以得到他做你想做的操作

纯属个人记录，更好理解

参考文章 (http://t.csdn.cn/Z33QB)