使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理

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

treedata: [// 初始化树列表
        { // 默认数据
          label: '一级 1',
          children: [{
            label: '二级 1-1'
          }]
        }
      ]

export default {
  data: () => ({
    value: null,
    options: [ {
      key: 'a',
      name: 'a',
      subOptions: [ {
        key: 'aa',
        name: 'aa',
      } ],
    } ],
    normalizer(node) {
      return {
        id: node.key,
        label: node.name,
        children: node.subOptions,
      }
    },
  }),
}

normalizer (node) {
    if (node.children && !node.children.length) {
      delete node.children
    }
    return {
      id: node.key,
      label: node.name,
      children: node.children,
    }
  },

<treeselect
    :options="options"
    :value="value"
    :searchable="false"
    @input="updateValue"
    />

<el-col :span="12">
    <el-form-item label="所属公司" prop="company_ID">
      <treeselect :options="myGroupCompany" v-model="addForm.company_ID" :searchable="false"
        :default-expand-level="Infinity" :open-on-click="true" :open-on-focus="true"
        @input="updateGroupCompany" placeholder="所属公司" />
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="默认部门" prop="dept_ID">
      <treeselect :options="myDeptTree" v-model="addForm.dept_ID" :searchable="false"
        :default-expand-level="Infinity" :open-on-click="true" :open-on-focus="true" @input="updateDeptUser"
        :normalizer="normalizer" placeholder="所属部门" />
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="所属经理" prop="pid">
      <treeselect :options="myDeptUser" v-model="addForm.pid" :searchable="false"
        :default-expand-level="Infinity" :open-on-click="true" :open-on-focus="true"
        :normalizer="normalizer" placeholder="所属经理" />
    </el-form-item>
  </el-col>

addForm: {// 新建表单
    id: '',
    pid: null,
    dept_ID: null,
    company_ID: null,
    ................
  },

showAdd () {
      this.resetForm('addForm')
      this.initData() //打开新增窗体的时候，初始化公司列表
      this.isAdd = true
    },

async initData () {
      var param = {}
      await ou.GetMyGroupCompany(param).then(data => {
        console.log(data.result)
        var newTreedata = getJsonTree(data.result, {
          id: 'id',
          pid: 'pid',
          children: 'children',
          label: 'name'
        });
        this.myGroupCompany = newTreedata
      })
    },

import request from '@/utils/request'
import BaseApi from '@/api/base-api'
// 业务类自定义接口实现, 通用的接口已经在BaseApi中定义
class Api extends BaseApi {
  // 获取集团公司列表。如果是超级管理员，返回集团+公司节点；如果是公司管理员，返回其公司节点
  GetMyGroupCompany(data) {
    return request({
      url: this.baseurl + 'GetMyGroupCompany',
      method: 'get',
      params: data
    })
  }    
  ..........
}

async updateGroupCompany (value, instanceId) {
      // console.log(value + '~' + instanceId)
      this.addForm.dept_ID = null //置空控件内容
      if (!this.isEmpty(value)) {
        var param = { parentId: value }
        await user.GetDeptJsTreeJson(param).then(data => {
          this.myDeptTree = data.result
        })
      }
    },

<treeselect :options="myDeptTree" v-model="addForm.dept_ID" :searchable="false"
   :default-expand-level="Infinity" :open-on-click="true" :open-on-focus="true" @input="updateDeptUser"
   :normalizer="normalizer" placeholder="所属部门" />

async updateDeptUser (value, instanceId) {
      // console.log(value + '~' + instanceId)
      this.addForm.pid = null //置空控件内容
      if (!this.isEmpty(value)) {
        var param = { deptId: value }
        await user.GetUserDictJson(param).then(data => {
          this.myDeptUser = data.result
        })
      }
    },

<treeselect :options="myDeptUser" v-model="addForm.pid" :searchable="false"
   :default-expand-level="Infinity" :open-on-click="true" :open-on-focus="true"
   :normalizer="normalizer" placeholder="所属经理" />

normalizer (node) {
        if (node.children && !node.children.length) {
          delete node.children
        }
        return {
          id: node.id,
          label: node.label,
          children: node.children,
        }
      },

:normalizer="normalizer"

import { getJsonTree } from '@/utils/json-tree.js' // 转换二维表数据为树列表数据的辅助类

async initData () {
      var param = {}
      await ou.GetMyGroupCompany(param).then(data => {
        console.log(data.result)
        var newTreedata = getJsonTree(data.result, {
          id: 'id',
          pid: 'pid',
          children: 'children',
          label: 'name'
        });
        this.myGroupCompany = newTreedata
      })
    },

getTree () { // 树列表数据获取
      var param = {}
      user.GetMyDeptJsTreeJson(param).then(data => {
        // console.log(data)
        this.treedata = [];// 树列表清空
        var list = data.result
        if (list) {
          this.treedata = list
        }
        //修改另一个Treedata
        const ass = (data) => {
          let item = [];
          data.map((list, i) => {
            let newData = {};
            newData.id = list.id;
            newData.label = list.label;
            newData.children = list.children ? ass(list.children) : null;    //如果还有子集，就再次调用自己
            //如果列表为空，则移除children
            if (list.children && !list.children.length) {
              delete newData.children;
            }
            item.push(newData);
          });
          return item;
        }
        this.selectTreeData = ass(list)
      });
    },

/// <summary>
        /// 根据用户获取对应人员层次（给树控件显示的下拉列表)（值为ID)
        /// </summary>
        /// <param name="deptId">用户所在部门</param>
        /// <returns></returns>
        public List<TreeNodeItem> GetUserDictJson(int deptId)
        {
            var itemList = new List<TreeNodeItem>();
            itemList.Insert(0, new TreeNodeItem("-1", "无"));
            var list = BLLFactory<User>.Instance.FindByDept(deptId);
            foreach (var info in list)
            {
                itemList.Add(new TreeNodeItem(info.ID, info.FullName));
            }
            return itemList;
        }

<template>
  <div>
    <div class="flex-container">
      <div class="flex-item">
        <treeselect ref="tree" v-model="svalue" :disabled="disabled" :options="options" :multiple="false" :flat="false"
          :default-expand-level="Infinity" :open-on-click="true" :open-on-focus="true" clearable :max-height="200"
          :placeholder="placeholder" :normalizer="normalizer" />
      </div>
      <div v-if="showcheck" class="flex-item">
        <el-checkbox v-model="isTop" :label="checkboxLable" border @change="checkChange" />
      </div>
    </div>
  </div>
</template>

<MyTreeselectTop v-model="editForm.pid" :options="selectTreeData" :normalizer="normalizer" />