参考地址：https://vue-treeselect.js.org/

1、建议通过npm安装vue-treeselect，并使用webpack之类的捆绑器来构建您的应用程序。

npm install --save @riophae/vue-treeselect

2、本示例说明如何将vue-treeselect与Vue SFCs集成在一起。

<!-- Vue SFC -->
<template>
  <div id="app">
    <treeselect v-model="value" :multiple="true" :options="options" />
  </div>
</template>

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

  export default {
    // register the component
    components: { Treeselect },
    data() {
      return {
        // define the default value
        value: null,
        // define options
        options: [ {
          id: 'a',
          label: 'a',
          children: [ {
            id: 'aa',
            label: 'aa',
          }, {
            id: 'ab',
            label: 'ab',
          } ],
        }, {
          id: 'b',
          label: 'b',
        }, {
          id: 'c',
          label: 'c',
        } ],
      }

    },
  }
</script>

3、实例

<TreeSelect v-model="ruleForm.comName" :appendToBody="true" placeholder="请选择" :multiple="true" :flat="true" :sort-value-by="sortValueBy" :default-expand-level="1" :normalizer="normalizer" :options="treeData" style="width:100%"/>

import TreeSelect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    components: { TreeSelect },
    data() {
      return {
        normalizer(node) {
        if (node.child == null || node.child == "null") {
          delete node.child;
        }
        return {
          id: node.id,
          label: node.name,
          children: node.child,
        };
      },
      sortValueBy: "ORDER_SELECTED",
      treeData: [{
            "id": "10363019578370",
            "name": "中国集团有限公司",
            "child": [{
                "id": "1353931643010",
                "name": "研究所",
                "child": [{
                    "id": "13646729090",
                    "name": "测试有限公司",
                    "child": [{
                        "id": "13695725506",

                        "name": "四级单位",
                        "child": null
                    }, {
                        "id": "1369667522",
                        "name": "第二个四级单位",
                        "child": null
                    }]
                }, {
                    "id": "1368708652545",
                    "name": "分公司",
                    "child": null
                }]
            }, {
                "id": "135398871778",
                "name": "有限公司",
                "child": null
            }, {
                "id": "135399959042",
                "name": "一级公司",
                "child": [{
                    "id": "1353011516161",
                    "name": "二级公司",
                    "child": [{
                        "id": "13332487041",
                        "name": "四级",
                        "child": [{
                            "id": "137745549121",
                            "name": "五级",
                            "child": null
                        }]
                    }]
                }]
            }, ]
        }, ]
      
      }

    },
  }

<style lang='scss'>
.vue-treeselect__multi-value-item-container {
    line-height: 17px;
}
.vue-treeselect__label{
  font-size:14px !important;
  color: #606266 !important;
  font-weight: 500 !important;
  font-family: sans-serif !important;
}
.TreeSelect .el-form-item__content {
  line-height: 32px;
}
</style>