Vue- Treeselect组件使用（下拉框树形结构）

前言

• 最近在开发时遇到一个问题，是在输入框里面放一个树形组件。查看饿了吗之后发现都不太行

• 最后在网上搜了一下，真的是有相关的组件Treeselect，确实有相关文章说明，但是比较乱。

• 在数据配置项，多选，只能选子级都是有现成封装好的属性的，可以直接使用。

• 在这里记录一下，Treeselect全局使用

代码实现

1.下包

npm install treeselect -S

2.注册为全局组件很多地方要用-第一次记得在main.js中引入（主页文章有）

// 输入框树形组件
import Treeselect from '@riophae/vue-treeselect'
export default {
  // install全局引入 vue中一个方法
  // 第1个参数是标签名称，第2个参数是一个选项对象
  install (Vue) {
    // 注册组件
    Vue.component('Treeselect', Treeselect)
  }
}

3.main.js引入样式

// 下拉框全局组件样式
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

4.页面结构-deptID绑定的值-及相关使用

//  :show-count="true" 显示树性结构每一集有多少条数据
//  multiple  多选属性，多选时v-model是一个数组
//  :disable-branch-nodes="true"  只能选子级，父级不能选择
//  当我们树形结构层级超过3级时，v-model绑定值，可能只会停留在3级，可以加上面属性就解决了
//  valueFormat="object" v-model-变成树型结构（父级和子级数据都在）
//  :show-count="true" 显示子级数量
//  @select="selectedTree" 选中当前层级数据

<treeselect
          style="width: 220px;"
          v-model="deptID"
          :show-count="true"
          :options="deptOptions"
          @select="selectedTree"
          :show-count="true"
          :normalizer="normalizer"
          placeholder="选择维保班组"
   />

5.data数据

data() {
    return {
      // 绑定值
      deptID:null,
      // 树结构选择数据
      deptOptions: []
    }
}

6.methods方法-相当于tree树结构配置

methods:{
  // 树结构格式配置-跟element Tree树结构配置项一样-子级为空数组去除
      normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      // 可以配置isDisabled：true-false 来控制禁用
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children,
      };
    },
}

实际开发问题-后端需要你把选中数据父级子级全部以数组对象形式传回来

• 遇到这个需求的话，首先我们应该思考怎么知道用户选择的子父数据，
• 子级组转肯定是不现实，经过查阅，该组件有一个数据可以把绑定数据是一个数组对象形式，每一个对象都是我们选中的数据对应树型结构
• 解决数据选中问题，我们只要使用数据扁平化方法，把最终处理过的数据-数据对象传给后端即可-（数组扁平化方法主页文章有）

valueFormat="object"

结果：此时按照要求数据给你后端，回显时直接把这个数组对象直接返给你，你没有操作直接赋值，此时你发现显示正常

bug：当你删除一个父级节点，它的子级节点出来的需要再次删除，依此类推，如果子节点很多那需要删除很多次，用户体验不好

原因：因为你在回显时候，直接把后端的数组对象直接赋值了，但是用vue页面插件查看v-model版定值确实是树型结构，此时不要给迷惑了。这个数据是组件通过你给它的数组对象自己从组件options里面取过来的，没有关联关系，所以导致这个问题。（验证的话，你可以在data里面把v-model值写死，或者查看后端返回来数据，一对比就会发现，你给他数据和vue页面数据不一样-vue页面数据显示非常全面-因为是从options通过id取得）

解决：在回显时候把数据变成树型结构即可-后端直接把数据变成树型结构，或者在数组对象里面放父级id，前端自己把数据组装成树型结构赋值即可，这个bug就会消失，删除一次即可（前端数组对象转树型结构主页文章有）

---

总结：

经过这一趟流程下来相信你也对 Vue- Treeselect组件使用（下拉框树形结构） 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕