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)
}
