相关资源

1. 官方文档：Vue-Treeselect | Vue-Treeselect 中文网
2. 若依vue3版本：GitHub - yangzongzhuan/RuoYi-Vue3: (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

使用方式

1. 安装

npm install --save @riophae/vue-treeselect

2.导入

// import the component
  import Treeselect from '@riophae/vue-treeselect'
  // import the styles
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

3.组件注册

 // register the component
    components: { Treeselect },

4.设置默认值为null

字段参数：params 如果不设置空值、会在选择树形结构数据前显示（unknown）。 可以在v-model指令绑定值的时候： :v-model="scope.row.params||null"

5.设置options

options: [ {
          id: 'a',
          label: 'a',
          children: [ {
            id: 'aa',
            label: 'aa',
          }, {
            id: 'ab',
            label: 'ab',
          } ],
        }, {
          id: 'b',
          label: 'b',
        }, {
          id: 'c',
          label: 'c',
        } ],

若依vue版本的数据处理

1.vue template代码

<el-table-column width="300" label="文档分类" prop="classification" :show-overflow-tooltip="true">
    <template>
        <treeselect 
        slot-scope="scope" 
        append-to-body 
        z-index="9999" 
        v-model="scope.row.classification" 
        :options = "classification" 
        :normalizer="normalizer" 
        placeholder="请选择文档分类" />
    <template>
<el-table-column>

2. 相关函数与数据

通过获取后端返回的数据、进行树形结构数据处理 一般后端返回的数据是以parentId组织的同属性对象数组，

responseData:[
{
    parentId:0,
    classidifationId:100,
    classification:"项目管理报表"，
},
{
    parentId:100,
    classidifationId:101,
    classification:"1.方案阶段"，
},
{
    parentId:100,
    classidifationId:102,
    classification:"2.总体要求"，
},
{
    parentId:101,
    classidifationId:103,
    classification:"1.1 立项论证"，
},
{
    parentId:101,
    classidifationId:104,
    classification:"1.2 研制方案"，
},
]

一般树形结构源数据以接口形式提供：

listClassification().then(response =>{
this.classification = this.handleTree(response.responseData,"classficationId")
})

这里我们已经有了静态的模拟数据，可以直接赋值：

this.classification = this.handleTree(response.responseData,"classficationId")

handleTree函数

handleTree函数在若依系统中作为全局工具函数, 其绑定到全局的方式为： 在前端代码main.js中：

import {handleTree} from '@/utils/toolFunc.js';
Vue.prototype.handleTree = handleTree;

handleTree函数体

/**
 * 构造树型结构数据
 * @param {*} data 数据源
 * @param {*} id id字段 默认 'id'
 * @param {*} parentId 父节点字段 默认 'parentId'
 * @param {*} children 孩子节点字段 默认 'children'
 */
export function handleTree(data, id, parentId, children) {
  let config = {
    id: id || 'id',
    parentId: parentId || 'parentId',
    childrenList: children || 'children'
  };

  var childrenListMap = {};
  var nodeIds = {};
  var tree = [];

  for (let d of data) {
    let parentId = d[config.parentId];
    if (childrenListMap[parentId] == null) {
      childrenListMap[parentId] = [];
    }
    nodeIds[d[config.id]] = d;
    childrenListMap[parentId].push(d);
  }

  for (let d of data) {
    let parentId = d[config.parentId];
    if (nodeIds[parentId] == null) {
      tree.push(d);
    }
  }

  for (let t of tree) {
    adaptToChildrenList(t);
  }

  function adaptToChildrenList(o) {
    if (childrenListMap[o[config.id]] !== null) {
      o[config.childrenList] = childrenListMap[o[config.id]];
    }
    if (o[config.childrenList]) {
      for (let c of o[config.childrenList]) {
        adaptToChildrenList(c);
      }
    }
  }
  return tree;
}