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

npm install --save @riophae/vue-treeselect

<template>
  <divid="app">
    <treeselectv-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-itemlabel="所属公司"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-itemlabel="默认部门"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-itemlabel="所属经理"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) {returnrequest({

      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) {deletenode.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.resultif(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) {deletenewData.children;

            }

            item.push(newData);

          });returnitem;

        }this.selectTreeData =ass(list)

      });

    },

        /// <summary>
        ///根据用户获取对应人员层次（给树控件显示的下拉列表)（值为ID)/// </summary>
        /// <param name="deptId">用户所在部门</param>
        /// <returns></returns>
        public List<TreeNodeItem> GetUserDictJson(intdeptId)

        {var itemList = new List<TreeNodeItem>();

            itemList.Insert(0, new TreeNodeItem("-1", "无"));var list = BLLFactory<User>.Instance.FindByDept(deptId);foreach (var info inlist)

            {

                itemList.Add(newTreeNodeItem(info.ID, info.FullName));

            }returnitemList;

        }

<template>
  <div>
    <divclass="flex-container">
      <divclass="flex-item">
        <treeselectref="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>
      <divv-if="showcheck"class="flex-item">
        <el-checkboxv-model="isTop":label="checkboxLable"border @change="checkChange" />
      </div>
    </div>
  </div>
</template>

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