1.效果图

2.html

<el-select

      v-model="state.users"

      value-key="value"

      placeholder="请选择"

      multiple

    collapse-tags

      collapse-tags-tooltip

      style="width: 240px"

      @visible-change="visibleChange"

      @remove-tag="removeTag">

      <el-option class="option" value="" />

      <el-tree

        class="admins-tree"

        :data="state.userList"

        ref="menuTree"

        :props="{

          value: 'departmentId',

          label: 'departmentName',

          children: 'child'

        }"

        node-key="departmentId"

        default-expand-all

        :expand-on-click-node="false">

        <template #default="{ data }">

          <div class="custom-tree-node">

            <div style="line-height: 30px">

              <el-icon class="icon mr5">

                <ele-Folder />

              </el-icon>

              <span @click="userClickcChild(data, 2)">{{ data.departmentName }}</span>

            </div>

            <div class="tree-div" v-show="data.userList?.length">

              <span

                class="texts"

                v-for="(item, index) in data.userList"

                :key="index"

                @click="userClickcChild(item, 1)"

                >{{ item.name }}</span

              >

            </div>

          </div>

        </template>

      </el-tree>

    </el-select>

2.js

const props = defineProps({

  // 0-部门/成员，1-成员

  isType: {

    type: Number,

    required: true,

    default: () => 0

  },

  // 是否多选 0-否，1-是

  isMany: {

    type: Number,

    required: true,

    default: () => 0

  },

  users: {

    type: Array as PropType<sadas[]>,

    required: true,

    default: () => []

  },

});

// 监听数组初始化格式

watch(() => props.users, () => {

  state.users = props.users.map((item: any) => {

    return {

      type: item.userId ? 1 : 2,

      value: item.userId ? item.userId : item.departmentId,

      label: item.name ? item.name : item.departmentName

    }

  })

},{deep: true});

//

const visibleChange = async (val: boolean) => {

  // console.log(val);

  if (val) {

    let res = await promotionApis.getDataListAndUser();

    // console.log(res.data);

    state.userList = res.data;

  }

};

// 成员点击

const emit = defineEmits(['update:users'])

// type: 1-人，2-部门

const userClickcChild = (rows: any, type: number) => {

  // console.log(rows)

  let status = {} as any

  if( type == 1 ) {

    status = props.users.find(( items: any ) => items.value == rows.userId)

  }

  if( type == 2 && props.isType != 1 ) {

    status = props.users.find(( items: any ) => items.value == rows.departmentId)

  }

  if( !status ) {

    if( props.isMany ) {

      state.users.push({

        type: type,

        value: rows.userId ? rows.userId : rows.departmentId,

        label: rows.userId ? rows.name : rows.departmentName

      })

    } else {

      state.users = [{

        type: type,

        value: rows.userId ? rows.userId : rows.departmentId,

        label: rows.userId ? rows.name : rows.departmentName

      }]

    }

  }

}

// 删除标签

const removeTag = (e: any) => {

  state.users.filter((item: any) => item.value == e.value)

}